CSS Forum

**AEMcSwain** · 02:02 PM

I cant get headers to work! Why?

Code:

<head> 
<style type="text/css">     
  

<!-- "As you can see below, i tried to include a header image in 3 different ways" -->


#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; background:url(LINK REMOVED FOR POST) no-repeat; height:400px; }
#header{background-image: url(LJNK REMOVED);}

header {height: 500px; margin bottom: 10px; background-image:url(LINK REMOVED) ; }

<!-- "body image insertion works fine, so is null" -->

body {background-image:url(null) ; }
p {color: red}

</style>
</head>
<body>


<div ID=header></div>
<p>this is text</p>

</body>

**chrishirst** · 01-16-2013, 01:16 PM

Code:

margin bottom:

There is no property called "margin bottom: " or one called "$bordercolor;"

**vangogh** · 01-16-2013, 02:09 PM

Yep. margin bottom needs to be margin-bottom. $bordercolor is a variable so I'm guessing the original code was from a Sass or Less file. You'll need to supply an actual color like blue or #ff0000.

Try those fixes and see if the heading shows up. If not let us know and we can try again.

**AEMcSwain** · 01-16-2013, 05:25 PM

Ok. So i removed the id's, and just kept the header formatting. I also removed the margin bottom tag. Despite these changes, my header is stilll nonexistent.

Here's the modified markup

<head>
<style type="text/css">

header {height: 500px; background-image:url(images/headerbg.img) ; }



body {background-image:url(null) ; }
p {color: red}

</style>
</head>
<body>

<p>this is text</p>

</body>

**vangogh** · 01-17-2013, 02:17 PM

Is this what you have for the background image url?

images/headerbg.img

I'm not familiar with the .img extension. Maybe that's throwing things off.

Do you have a link to this online somewhere? It'll be very hard trying to figure this out just seeing a few bits of code. If you can put the page online somewhere and link to it, that will make it easiest for us, and likely lead to the quickest solution.

**AEMcSwain** · 01-18-2013, 11:53 AM

no, i'm not using that as my image. I'm using a .png

i haven't bought a domain yet, so i don't how i could make it available. Though, i must say, this isn't my website, it's just a test page with all other code removed to sterlize the possibility of complex mistakes; to try to sort out the problems with the css element in question specific to this thread. which would be:

" background-image: url() "

inside of the header , or making the header appear at all in ANY page.

**vangogh** · 01-18-2013, 01:11 PM

If you can't put the page online somewhere (it doesn't have to be under its own domain) then could you paste more of the code here. Or is what you showed in your first post all there is? We'll probably need to see both the html and the css.

Other than what's already been pointed out above, I don't see anything wrong with what you've posted here. Maybe I'm missing something, but I'm just not seeing anything. More code might help.

**Puddlemut** · 01:10 PM

Not sure if this got resolved.
But, what I see as the problem is that your "header" div doesn't have any content so no background image will show. To make it show, you need to define in your css "display: block" and make sure you set the width and height.

If you provide more code to see if you have all the correct elements would make things a lot easier on what to pinpoint and not just shooting in the dark.

**vangogh** · 01-22-2013, 02:18 PM

I thought of that too, but it looks like a height was set and since the element in question is a div, it should be block level by default. I don't see where a width was set though, so maybe that is the issue.

**matt w** · 01-27-2013, 03:01 PM

AEMcSwain,
Why don't you get a free hosting server? It would help a lot and it's free.

**tinkib** · 04-26-2013, 06:01 PM

maybe:
<div ID="header">

?