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 Isaac Russell
Isaac Russell
12,091 Points

Responsive Background Image--Upper third only

I am attempting to build a site with a responsive background image but I only want it on an upper third (more or less) of the screen.

This is what I have so far.

http://codepen.io/isaac/pen/dviDL

Is this the basic structure and technique to use?

I'm especially interested in knowing if the div is in the right place and css is correct. Or are their other best practices.

Thanks!

1 Answer

Ram Ada
Ram Ada
360 Points
Ram Ada
Ram Ada
360 Points

I'm having a hard time grasping what your question is. I see a bunch of div sections on the page, but I can't tell which one is the link.

My suggestion would be two create two divs: -The first one would be the background and span the entire page. -The second one would be a div with 1/3 the height of the first one and overlays the first one. This one would be transparent and be the responsive one.

The CSS for this would be like this:

#div1 {
height:100%;
background-image: url('http:// url here ');
}

#div2    {       
background-color: rgba(0,0,0,0)         /* this makes it transparent */
}

Could you elaborate what you mean by a responsive background image? What exactly do you want the responsive image to do?