Adding image to header

Question

Using css I'm trying to add an image to the left of my current header.
www.sunnysihota.com currently It just has the title there and I had an image I wanted to place to the far left side.
Here's the css code but nothing is showing up, I havent been able to add ANY images or backgrounds through css other than the body {} background color.
code:
#header {
font-family: serif;
color: #472B0B;
text-align: center;
font-size: 200%;
line-height: 0.5em;
background: url(img/louang-temple.jpg) no-repeat top left;
display:block;
}

#header, #nav {
background-image: url("img/arches.png") repeat;
}

body {
background-color:#F0EFE9;
}

#nav, #footer {
background-color: #A67829;
margin-top: 0px;
padding: 5px 0px 5px 0px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
Any help greatly appreciated!

Rajinder Sihota · Answer

I made the changes you recommended including adding the doctype, html and head tags.  I'm still having an issue in IE.
When I load sunnysihota.com in IE the images and titles after the 'head' area are all messed up.  Any ideas?

Rajinder Sihota · Answer

That worked! Thanks for the help Justen!

J A · Answer

You are missing a closing } here,
nav {
    background-image: url("img/arches.png") repeat;
You have an extra closing } above the li selector here
.article { height:250px; font-family: Arial, Verdana, sans-serif; color: #665544; text-align: center; }

}

li {...
You are still setting the #nav background-color after you set the image, so it will override the image, Do this instead
#nav, #footer {
margin-top: 0px;
padding: 5px 10px 5px 10px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}

#footer {

background-color: #A67829;
}

Rajinder Sihota · Answer

Thanks for the help guys I appreciate it.
Justen, I made those changes you listed but all my text after lost all the text centering and font changes I made.
You can see here that my titles are basic and to the left but in the code below they are centered and a different font.   www.sunnysihota.com
#header {
font-family: serif; 
color: #472B0B; 
text-align: center; 
font-size: 200%; 
line-height: 0.5em; 
background: url("img/louang-temple.jpg") no-repeat top left, url("img/arches.png") repeat;
display:block; 
float: left; top: 0px;
}
nav {
background-image: url("img/arches.png") repeat;
body {
    background-color:#F0EFE9;
}
nav, #footer {
background-color: #A67829;
margin-top: 0px;
padding: 5px 10px 5px 10px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
.images {
    margin-top: 0px;
    padding: 10px 0px 5px 0px;
}
.names {
    line-height: 0.75em;
    color: #1F3569;
    text-align: center;
    font-family: serif;
    margin-top: 5px;
    font-size: 115%;
}
.article {
    height:250px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
    text-align: center;
}
}
li {
    display: inline;
    padding: 5px 10px 5px 10px;
    border: 1px solid black;
    background-color: #F0EFE9;
    width: 15%;
        -webkit-transition: background-color .75s;
        -moz-transition: background-color .75s;
        -o-transition: background-color .75s;
        transition: background-color .75s;
}
li a {
font-size: 80%;
text-decoration: none;
color: inherit;
}
li:hover {
color: white;
background-color: #A67829;
}

J A · Answer

The img location is relative to the css file, not the page itself. Background images would need to be in a img folder located in the css folder (if that's where your css is), or you could start with a leading / like this;
background: url(/img/louang-temple.jpg) no-repeat top left;
Indicates it should look into the pages root folder. It should work.
You should also note, you will override the first image as you set the background again here;
#header, #nav {
    background-image: url("img/arches.png") repeat;
}
One solution would be this;
#header {
    font-family: serif;
    color: #472B0B;
    text-align: center;
    font-size: 200%;
    line-height: 0.5em;
    background: url(../img/louang-temple.jpg) no-repeat top left, url("../img/arches.png") repeat;
    display:block;
}

#nav {
    background-image: url("../img/arches.png") repeat;
}

Sam Lillicrap · Answer

Try this
#header {
font-family: serif;
color: #472B0B;
text-align: center;
font-size: 200%;
line-height: 0.5em;
background-image: url("img/louang-temple.jpg") no-repeat top left;
display:block;
float: left;
top: 0px;
}
I added quotes around your background selector and changed it to background-image:
I added float and top selectors as well, add and delete them as necessary and see what works! It may also not be showing up as you haven't specified a height and width of the div ID, so try setting that using the height and width selectors.
Not only this but top left only defines the images place within the div, not on the whole page, so i think that code is irrelevant if you were trying to position the element within the page.
Hope that helps

Welcome to the Treehouse Community

Looking to learn something new?

Rajinder Sihota

Rajinder Sihota

Adding image to header

6 Answers

Sam Lillicrap

Sam Lillicrap

J A

J A

Rajinder Sihota

Rajinder Sihota

nav {

nav, #footer {

J A

J A

Rajinder Sihota

Rajinder Sihota

J A

J A

J A

J A

Rajinder Sihota

Rajinder Sihota