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 Mariano Okpalefe
Mariano Okpalefe
4,182 Points

why wont my background image show up? i've tried moving it around multiple ways and cant figure it out.

html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device=width, initial-scale=1"> <title>Jacob Byers - Videographer</title> <link href="normalize.css" rel="stylesheet"> <link href="main.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'> <meta name="author" content="Jacob Byers"> </head> <body> <div class="page-container"> <div class="main-section"> <header> <h2>Jacob Byers</h2> </header> <div class="main-content"> <h1>Videographer</h1> <p>Patience.Passion.Perseverance</p> </div> <!--main content--> </div> <!--main section--> </div> <!--page container--> </body> </html>

css:

.main-section { background-image: url('../img/jacobbg.jpg') no-repeat center center scroll; }

2 Answers

Gary Hargreaves
Gary Hargreaves
10,504 Points
Gary Hargreaves
Gary Hargreaves
10,504 Points

Hi Mariano

Try

.main-section { 
background-image: url('../img/jacobbg.jpg') no-repeat center;
width: 100%;
}

If that doesn't work it could be something to do with other CSS in your code.

Gary

David Thrower
David Thrower
6,693 Points
David Thrower
David Thrower
6,693 Points

I am also noticing that you are (likely unknowingly) specifying to apply this background to an object titled "main-section" which does not exist. This is the bigger problem... You would have to select a valid selector (name of a tag in the HTML such as "body "or "section" or "ul" or "ul li a" .... etc.) to apply this background to anything... the correct syntax would be for example...

body { background-image: url('../img/jacobbg.jpg') background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }

If you really do want that applied to a specific section within the body not the body as a whole, I would add a <section> blah blah blah </section> in the HTML and add an id to it like this <section id="main-section"> blah blah blah </section>

now you can call this section in the CSS as follows:

main-section {

background-image: url('../img/jacobbg.jpg') background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }

also

Double check that the file path or URL to the image is correct and complete. also make sure there is no extraneous punctuation or other stray text on it.

also bear in mind that you can also specify a background image in the HTML this way:

References:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_body_background

Mozilla developer network

many others ... Don't be afraid to google and dig through documentation for further answers.

hopefully I didn't make any syntax errors in explaining this.