题
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:
https://stackoverflow.com/questions/18423004
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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??
解决方案
You have a type-o:
its: height: 200x;
and it should be: height: 200px;
also check the image url; it should be in the same directory it seems.
Also, dont use 'px' at null (aka '0') values. 0px, 0em, 0% is still 0. :)
top: 0px;
is the same with:
top: 0;
Good Luck!
其他提示
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.
Remove the position: absolute; attribute in the style
Height is missing a p from its value.
Should be height:200*p*x
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.
