HTML/CSS--Creating a banner/header

Asked 24/8, 2013 at 20:51 Answered 24/10, 2014 at 15:31

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

Semiskilled answered 24/8, 2013 at 20:51 Comment(4)

change height: 200x; to height: 200px; – Laser 24/8, 2013 at 20:54

Thanks, someone else also caught that. I fixed it, but that gave me the same thing. – Semiskilled 24/8, 2013 at 21:1

Why are you using z-index: -1? That will push it below other elements. You can imagine them on a z-axis. – Hickory 24/8, 2013 at 21:15

Setting left and right along with width:100% is redundant and may produce a conflict. – Shipley 24/8, 2013 at 21:17

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!

Sorel answered 24/8, 2013 at 21:3 Comment(5)

Thank you Crisy. I fixed what you said, but it gave me the same thing. Maybe there is a problem with my image itself...? – Semiskilled 24/8, 2013 at 21:5

Thanks Crisy. I altered my question a bit. The image I want is just not showing up completely. – Semiskilled 24/8, 2013 at 21:13

You could use a .svg logo instead of .png or .gif; – Sorel 24/8, 2013 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 – Sorel 24/8, 2013 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. – Semiskilled 24/8, 2013 at 23:36

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.

Hickory answered 24/8, 2013 at 21:20 Comment(4)

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. – Semiskilled 24/8, 2013 at 21:27

I made a comment above about removing the z-index value. Have you removed that? What are you using that for? – Hickory 24/8, 2013 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. – Semiskilled 24/8, 2013 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. – Hickory 24/8, 2013 at 21:53

Remove the position: absolute; attribute in the style

Goingover answered 24/10, 2014 at 15:31 Comment(0)

Height is missing a p from its value.

Should be height:200*p*x

Flank answered 24/8, 2013 at 20:54 Comment(1)

Thanks Stuart. I fixed that, but it still gave me the same thing. :( – Semiskilled 24/8, 2013 at 21:0

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.

Armagh answered 23/9, 2014 at 5:25 Comment(0)

Recommended topics

Hot tags