HTML/CSS--Creating a banner/header

Question

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??

Thanks, someone else also caught that. I fixed it, but that gave me the same thing. — user2714330, Aug 24 '13 at 21:01
Why are you using z-index: -1? That will push it below other elements. You can imagine them on a z-axis. — Jeffpowrs, Aug 24 '13 at 21:15
Setting `left` and `right` along with `width:100%` is redundant and may produce a conflict. — ygesher, Aug 24 '13 at 21:17

score 4 · Accepted Answer · edited Oct 09 '22 at 20:28

4

You have a typo:

You currently have: height: 200x;

And it should be: height: 200px;

Also check the image url; it should be in the same directory it seems.

Also, don't use 'px' at null (aka '0') values. 0px, 0em, 0% is still 0. :)

top: 0px;

is the same with:

top: 0;

Good Luck!

edited Oct 09 '22 at 20:28

starball

20,030
7
43
238

answered Aug 24 '13 at 21:03

RGLSV

2,018
1
22
37

Thank you Crisy. I fixed what you said, but it gave me the same thing. Maybe there is a problem with my image itself...? – user2714330 Aug 24 '13 at 21:05
Thanks Crisy. I altered my question a bit. The image I want is just not showing up completely. – user2714330 Aug 24 '13 at 21:13
You could use a .svg logo instead of .png or .gif; – RGLSV Aug 24 '13 at 21:22
Or go with a css generated logo; Also if you add a wrapper around that img tag, you could specify a max-width of 100% for the image, and a width of 100% to the wrapper – RGLSV Aug 24 '13 at 21:24
Thanks Crisy. I found a way around the problem by first putting in a div id = header and then the code above using just a solid colored bar. – user2714330 Aug 24 '13 at 23:36

Jeffpowrs · Answer 2 · 2013-08-24T21:29:55.950

2

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.

edited Aug 24 '13 at 21:29

answered Aug 24 '13 at 21:20

Jeffpowrs

4,430
4
30
49

Thanks Jeff! Yes, that looks great as far as centering, but my text/logo that is on the solid background is still not showing up. Only the solid background is showing up. Do you know why? Thanks again. – user2714330 Aug 24 '13 at 21:27
I made a comment above about removing the z-index value. Have you removed that? What are you using that for? – Jeffpowrs Aug 24 '13 at 21:28
I removed it, but it gave me the same thing. I was using it because I saw it in an example code. Thanks. – user2714330 Aug 24 '13 at 21:51
Is the path to your image correct or is it mistyped? In this case it should be right next to your html file. – Jeffpowrs Aug 24 '13 at 21:53

score 1 · Answer 3 · answered Oct 24 '14 at 15:31

1

Remove the position: absolute; attribute in the style

answered Oct 24 '14 at 15:31

Karel B.

11
1

score 0 · Answer 4 · answered Aug 24 '13 at 20:54

0

Height is missing a p from its value.

Should be height:200*p*x

answered Aug 24 '13 at 20:54

Stuart Miller

647
3
8

Thanks Stuart. I fixed that, but it still gave me the same thing. :( – user2714330 Aug 24 '13 at 21:00

score 0 · Answer 5 · edited Sep 23 '14 at 05:50

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.

HTML/CSS--Creating a banner/header

5 Answers5