Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gabriel Ward
Gabriel Ward
20,222 Points

background-image

I'm trying to add a background image to my page. I have done this many times before but this time it's not working and I can't figure out why. The naming of the image is correct because if I put it in the main-content div it appears no problem. Any help would be greatly appreciated.

Here's my html

<!DOCTYPE html>
<head>
    <title>Patrick Sherratt</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class='central'>
        <header>
            <span id='homepage' class='title'>
                <h1 class='name'>Patrick Sherratt</h1>
                <img class='menu' src='menu.png' alt='overlaymenu'>
            </span>

        </header>   
    </div>
    <div class='about-content'>
        <p>Bob's your uncle</p>
    </div>
</body>
<html></html>

Here's my CSS

#homepage {
    background-image: url('fiji.jpg');
}
Gergő Bogdán
Gergő Bogdán
6,664 Points

I can see for the span you have a class defined too, what is in the CSS class called "title" ?

jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

Not sure but span is an inline element and you've not defined any width/height. It may be collapsing. Try adding display block to the css or define width height in the html.

3 Answers

Kidist Admasu
Kidist Admasu
11,020 Points
Kidist Admasu
Kidist Admasu
11,020 Points

try to use div instead of span. and it works fine. div is used as a container of other html elements while span used as a container of text and as it is inline element meaning the browser doesn't display a line break before and after it so the background image not shown clearing.

<div id='homepage' class='title'>
                <h1 class='name'>Patrick Sherratt</h1>
                <img class='menu' src='menu.png' alt='overlaymenu'>
            </div>
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Kidist,

So you've managed to add the background image to the #homepage div? Could you post your code? I've tried changing span to div but I've still had no luck. Even if i try and just change the background color nothing happens. I'm really stumped. I can't work out what the problem is. I'm sure it's somehting simple though.

Thanks,

Gabe

jasonjones5
PLUS
jasonjones5
Courses Plus Student 5,571 Points
jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

You've missed the actual html tag off the top of the page. You've got the doctype but not the opening tag.

jasonjones5
PLUS
jasonjones5
Courses Plus Student 5,571 Points
jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

You've also got a spare html opening tag at the bottom of the file which may be throwing things off.