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
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsBackground Image In CSS
I want to replace my background color with an image in CSS, it is not working.
<style>
body {
font-family: 'Nunito', sans-serif;
color: #4169E1;
background-image: url(background.jpg) repeat;}
</style>
14 Answers
Zahid Ali
4,380 PointsOk, so it sounds like the final hurdle was the image path issue. Having your images in the CSS folder generally isn't good practice so you may want to create a new folder called "images" on the same level as the "css" folder. Then in your style.css you would reference the image like this
background-image: url('../images/background-texture.jpg')
the .. part is telling the path to go back up one level, then into the images folder and then to background-texture.jpg.
I hope this makes sense. :)
Zahid Ali
4,380 PointsHi, The way you've written your code, you need to do something like this background-image: url('background.jpg'); background-repeat:repeat;
Or you could use a short-hand method: background: url('background.jpg') repeat;
Remember to use the ' before and after the filename for your image too. :)
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsNothing Is Working, This Is In My CSS Folder under style.css
<style> body { font-family: 'Nunito', sans-serif; color: #4169E1; background-image: url('css/background-texture.jpg'); background-repeat:repeat;}
</style>
Denisse Cabieses
6,411 PointsHi Crystal- Make sure that the path to your image is correct. For example, if you have your images inside a folder the path would be (folder name/background.jpg). Hope this helps!
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsNothing Is Working, This Is In My CSS Folder under style.css
<style> body { font-family: 'Nunito', sans-serif; color: #4169E1; background-image: url('css/background-texture.jpg'); background-repeat:repeat;}
</style>
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsI Have Tried Pulling It From IMG And CSS
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsI Have Tried Pulling It From IMG And CSS
Zahid Ali
4,380 PointsHi Crystal, The CSS you have provided is correct, can't see anything wrong there - I can only think it's the path to the image now as Denisse has mentioned. Is the background-texture.jpg file in the CSS folder? your CSS is trying to reference an image in a css folder If so you'd only need to use: background-image: url('background-texture.jpg') to reference it.
To test if this is the issue, perhaps try referencing a graphic on the web e.g. use this background-image:url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
If that works and you can see a background image, you'll know it's an issue with the path to the file.
OR place the background-texture.jpg file in the css folder on the same level as your style.css file and ensure the reference to the image in the css is: background-image: url('background-texture.jpg').
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsThe Link Worked After I Transferred It The The Individual Page From The CSS Folder
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsThe photo still does NOT work :-(
Zahid Ali
4,380 PointsI'd suggest trying the example image I mentioned in my previous post. It sounds like it's an issue with the image path.
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsGot It!!! I Will Have To Apply To Each Page, Thanks A Bunch :-)
Zahid Ali
4,380 PointsYou're welcome. :) Glad I could help.
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsNow It Is Several Photos Even After I Removed The Repeat
<style> body { font-family: 'Nunito', sans-serif; color: #4169E1; background: url('css/background-texture.jpg') repeat; }
</style>
Maybe My System Is Having A Delayed Reaction Or Something
Zahid Ali
4,380 PointsI think the background is set to repeat by default so even if you remove it, it'll repeat the image.
try replacing "repeat" with "no-repeat" e.g.
body { font-family: 'Nunito', sans-serif; color: #4169E1; background: url('css/background-texture.jpg') no-repeat; }
CRYSTAL MORRIS
Courses Plus Student 2,809 Points<style> body { font-family: 'Nunito', sans-serif; color: #4169E1; background: url('css/background-texture.jpg') ;}
</style>
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsYAY!!! WooHoo!!! It Is Perfect!!! Thank You, So Much!!!
Zahid Ali
4,380 Points:)