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
Darrell Warren
6,644 PointsFull-Page Background Image
I am using Firefox (Windows 7) and also Chrome (Mac) and I CAN NOT get the "full-page background image" to work. I can get a background color, but no full-page image. My set up is as follows: HTML: <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Full Page Background</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header>My logo/navigation go here!</header> <section>My content goes here!</section> <footer>My footer goes here!</footer> </body> </html>
CSS: html { height: 100%; background: url('img/bg.jpg') #8b8ea7 no-repeat center; background-size: cover; }
DIRECTORIES: css - (contains style.css and normalize.css) img - (contains bg.jpg)
index.html is outside of the above directories/folders
I am using the following HTML editors: CoffeeCup (Windows 7) and Atom (Mac).
Can you please tell me what I am doing wrong; it's driving me crazy.
Trace Harris
Python Web Development Techdegree Graduate 22,065 PointsI think I got you, check out my reply towards bottom of page.
6 Answers
Trace Harris
Python Web Development Techdegree Graduate 22,065 PointsIn your css add
width: 100%;
Darrell Warren
6,644 PointsThank you for your answer, but this did not help. I still get no background image...
Trace Harris
Python Web Development Techdegree Graduate 22,065 Pointscan you upload the code so I can see everything in context
Darrell Warren
6,644 PointsDisregard the code sent. it did not reproduce correctly. I will send it again...
Darrell Warren
6,644 PointsHTML: <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <title> Practice Site | Darrell D Warren </title> </head> <body> <header> <a href="#"><h1>Darrell D Warren</h1></a> <a href="#"><h2>Designer</h2></a> <ul> <a href="index.html"><li>Home</li></a> <a href="about.html"><li>About</li></a> <a href="work.html"><li>Work</li></a> <a href="services.html"><li>Services</li></a> <a href="contact.html"><li>Contact</li></a> </ul> </header> <section> <p>My content will go here!</p> </section> <footer> <p>©Copyright 2015. Darrell D Warren</p> </footer> </body> </html>
CSS: html { width: 100%; background: url('img/bg.jpg') no-repeat center; background-size: cover; }
Darrell Warren
6,644 PointsHere it is...
/---------------------HTML-----------------------/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <title> Practice Site </title> </head>
<body> <header> <a href="#"><h1>My Name</h1></a> <a href="#"><h2>Designer</h2></a> <ul> <a href="index.html"><li>Home</li></a> <a href="about.html"><li>About</li></a> <a href="work.html"><li>Work</li></a> <a href="services.html"><li>Services</li></a> <a href="contact.html"><li>Contact</li></a> </ul> </header>
<section> <p>My content will go here!</p> </section>
<footer> <p>©Copyright 2015. My Name</p> </footer>
</body> </html>
/---------------------CSS-----------------------/
html { width: 100%; background: url('img/bg.jpg') no-repeat center; background-size: cover; }
DIRECTORIES: css - (contains style.css and normalize.css) img - (contains bg.jpg)
index.html is outside of the above directories/folders
I am using the following HTML editors: CoffeeCup (Windows 7) and Atom (Mac).
Trace Harris
Python Web Development Techdegree Graduate 22,065 PointsOkay I got it working on my this is what I noticed that differed from the code that you posted my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Practice site</title>
</head>
<body>
My Name
<a href="#"><h2>Designer</h2></a>
<ul>
<a href="index.html"><li>Home</li></a>
<a href="about.html"><li>About</li></a>
<a href="work.html"><li>Work</li></a>
<a href="services.html"><li>Services</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
My content will go here!
</body>
</html>
<p>©Copyright 2015. My Name</p>
and now the css:
html {
width: 100%;
background: url('../img/full-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
}
There is a couple of things that I see 1. In your html you declared your doctype but did not structure the page:
<html>
<head>
<title>your title heret</title>
all your meta and links to css style folder go here
</head>
<body>
structure of page goes here
</body>
</html>
- in your css you had html tag as a selector however there was no <html> tag in your index,html file. so there was nothing to pass the properties to. also watch the file names as well I noticed when I downloaded the courses files the img was titled : full-bg.jp in the image folder.
Rose Delva
9,326 PointsI think your missing a semicolon between after url('img/bg.jpg').
Also why are you putting it in the html tag and setting the width to 100%. usually, if you want to use a background image you would normally put it in the body tag not html..
Darrell Warren
6,644 PointsWhen I paste my code in here it deletes some of the copy. Besides, My code followed what was in the tutorial. In it the background image is placed in the html tag... I'm very confused at this point...
Rose Delva
9,326 PointsDid you try putting it inside the body {} and see what happens. Normally when I code I always put background image there.
Darrell Warren
6,644 PointsThank you all. Trace Harris, you helped me to see that my directory access notation was not correct. To access the image folder from the stylesheet I had:
background: url('img/bg.jpg') no repeat;
It should be:
background: url('../img/bg.jpg') no repeat;
I made the correction and everything works great!
Thank you, Thank you, Thank you!
Trace Harris
Python Web Development Techdegree Graduate 22,065 PointsTrace Harris
Python Web Development Techdegree Graduate 22,065 PointsIf my answer fixed the issue please remember to vote best answer. Thanks it helps with a program I am in.