Jump to content

#header background-image, not working

Recommended Posts

Hi all,


I just finished a webdesign course for home study.

Now I am working on my first assigment but it's going quite the way I want...

I want to use a background image in my header div.

Here is my code, what am I doing wrong? Can anybody help me please? Thank you!


my CSS:


#header {
background-image: url(header.jpg);
background-size: cover;
background-position: fixed;
text-align: center;
width: 100%;
height: 200px;
top: 100px;
<div id="header">
<div class="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Classes</a></li>
<li><a href="">Contact</a></li>
Edited by Naomi

Share this post

Link to post
Share on other sites

The first thing you need to do is make sure the image can actually be found by the CSS parser. The url you are using might need a path depending on the location of the image file in relationship to the location of the page file, and the css file.

Share this post

Link to post
Share on other sites

There is no such value of fixed for background-position:


You maybe thinking of property background-attachment:


The top: property only works if position: property is used with values relative, absolute or fixed.

Share this post

Link to post
Share on other sites

Thank you for your reply, I was busy with exams so I didn't find the time to look at your reaction.

I checked the path so many times and tried everything and everytime thinking why it's not working now I look again and I see I did it wrong...

Thank you!

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...