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
Stephen Tickner
1,587 PointsAdding a background-image to a header
Hi,
I'm still very new to CSS so there might be an obvious answer but is it possible to add a background-image: to a header element? I created a class for the header to test my syntax and it works so I'm not sure if I'm doing something wrong or it simply can't be done.
header {
float: left;
margin:0 0 30px 0;
padding: 5px 0 0 0 ;
width: 100%;
background-image:url('../img/Kef_Beach.jpg');
}
/* Class I created to test syntax
.header-image {
background-image:url('../img/Kef_Beach.jpg');
}
*/
2 Answers
Martin Hesseler
4,572 PointsSounds to me like you're overriding your own rules somewhere (CASCADING style sheet!!). Put your declaration at the very end of your css file and try again. It should work. Then, using developer tools in chrome or firefox, you can check which rules are overwritten.
Clint Dehner
8,808 Pointsdo you have the images correct url path? Other than that your coding looks good.
just for your reference if you're not getting the response in time you can use this site which has helped me figure out some of my own questions. :) https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
hope that helps
Michael Harper
14,741 PointsMichael Harper
14,741 PointsHi Stephen, Your CSS syntax works fine for me: background-image:url('../img/Kef_Beach.jpg'); .. so could be a problem with the path and image file location?
To test, move the image to the same directory as your HTML and edit the code to: background-image:url('Kef_Beach.jpg');
If that works, then it's just a matter of finding the correct path. If the img directory is in the same directory as your HTML file, it would look like: background-image:url('img/Kef_Beach.jpg');
If none of this helps, verify the file case and extension are exactly as written: .jpg - not .JPG, .gif, .GIF, .PNG or .png. If all else fails, try swapping out the graphic file - sometime one will become corrupt and simply fail to display.