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!
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
Simon Lindsay
Courses Plus Student 12,179 PointsProblem trying to get header to float over background image
I have some images in an external CSS sheet for my header tag: header { background: url(images/logo2.jpg) 5% 5% no-repeat, url(images/background_image.jpg) no-repeat; background-size: 20%, 100%; }
My question is how do I get the header element to clear the images so that I can see the image in the browser. I need the solution to be fluid as well, so increasing the height of the div to x number of pixels doesn't help me unfortunately. Any help you could shed on this would be greatly appreciated.
4 Answers
Caroline Hagan
12,587 PointsHi Simon Lindsay , not sure what you mean by "how do I get the header element to clear the images so that I can see the image in the browser" - could you expand on that?
Perhaps set up an example on Codepen.io if you don't have a live link to take a look at?
Simon Lindsay
Courses Plus Student 12,179 PointsHi Caroline, apologies if I was not clear. My CSS code is below:
header { background: url(images/logo2.jpg) 5% 5% no-repeat, url(images/background_image.jpg) no-repeat; background-size: 20%, 100%; }
Basically my issue is that the two background images in the above code "logo 2" and "background_image" are not showing up as their parent "header" tag is collapsed.
Caroline Hagan
12,587 PointsIf I add that CSS to a header element, nothing is displayed as no width or height is defined - are you specifying these elsewhere, or are they missing too?
Simon Lindsay
Courses Plus Student 12,179 PointsOk so I can set the width of the image to 100%. The problem is that I want the background image to be responsive so what value do I give the height property?
Caroline Hagan
12,587 Pointsin responsive builds, img { width: 100%; height: auto;} should do the trick :-)
Simon Lindsay
Courses Plus Student 12,179 PointsUnfortunately not I've tried the below code and it's still not working:
header { background: url(images/logo2.jpg) 5% 5% no-repeat, url(images/background_image.jpg) no-repeat; background-size: 20%, 100%; width: 100%; height: auto; }
Caroline Hagan
12,587 PointsSorry I meant that for inline images.
I've updated the codepen, where the images are positioned, and 'move' with the width of the header element. Still not sure how you want them to position/move depending on the size?
Chris Wiley
11,327 PointsChris Wiley
11,327 PointsThe background image may not be showing up because your missing a pair of periods after the opening url(..image. If you set your width in percentages and auto the y-axis that should give you the fluidity you desire.