I've got a horizontal image as a GIF and JPG. It is something I made with Paint--a text logo with an image on a solid background.
I am having a lot of trouble trying to get it to display as a banner/header.
So far, I am only able to get the solid background to show up. The text/logo mysteriously disappears. The solid background extends to the full screen over my background image, and I want that, but obviously, with my text/logo showing up.
This is the code I am using:
<style>
body {
background: url("mybackgroundimage.gif") repeat;
}
#banner {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
z-index: -1;
}
</style>
</head>
<body>
<img id="banner" src="mybannerimage.gif" alt="Banner Image"/>
</body>
I think there may be something wrong with my image. I tried this using a different image, and it worked, but my text was stretched.
How do I create a banner with a logo that doesn't stretch when I use this code??
Remove the z-index value.
I would also recommend this approach.
HTML:
<header class="main-header" role="banner">
<img src="mybannerimage.gif" alt="Banner Image"/>
</header>
CSS:
.main-header {
text-align: center;
}
This will center your image with out stretching it out. You can adjust the padding as needed to give it some space around your image. Since this is at the top of your page you don't need to force it there with position absolute unless you want your other elements to go underneath it. In that case you'd probably want position:fixed; anyway.
For the image that is not showing up. Open the image in the Image editor and check the type you are probably name it as "gif" but its saved in a different format that's one reason that the browser is unable to render it and it is not showing.
For the image stretching issue please specify the actual width and height dimensions in #banner instead of width: 100%; height: 200px that you have specified.
Height is missing a p from its value.
Should be height:200*p*x
Remove the position: absolute; attribute in the style
Source: Stackoverflow.com