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 Sonny Allward
Sonny Allward
11,449 Points

How to make a div image responsive?

Hello, I am trying to create this as a responsive layout: http://www.uploadir.com/u/v2huuj6d

I am very new to this and I am already stuck on the banner. I want the banner to be responsive but I'm not sure how I go about doing this. I would like the image to be a maximum of 960px. I want the image as a div background image. How would I do this? I saw the tutorial on how to make images responsive but it doesn't seem to work with div background images.

3 Answers

hugo bonilla
hugo bonilla
1,658 Points
hugo bonilla
hugo bonilla
1,658 Points

If you upload some code it might make it easier to figure out whats going wrong, all i can say for now is "%" is what makes it responsive, also make sure you don't have width or height properties in your img tag in your source code.

Also do you want it to have page breaks? like when you reach a certain point the page layout will change or just a fluid page?

I just started out also but i did this page for a class assignment maybe it will help you out, I suggest opening the source in Chrome (right click > view page source). it shows how you can use max and min width while still being "fluid" hope this helps!

http://hnbonilla.com/m6.html

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Have you gone through the Treehouse's Build a Responsive Website course?

Sonny Allward
Sonny Allward
11,449 Points
Sonny Allward
Sonny Allward
11,449 Points

Thank you both for your replies.

Yes James Barnett, I have. There is a video on scalable images, but this doesn't seem to work for divs with an image as a background.

The reason I didn't post code is because I don't know how to do it. This is what I have:

<div class="container">

    <div style="background: url(http://sonnyallward.co.uk/Biking/wp-content/themes/RU-Biking/images/sliders/slider.png); max-width: 100%;">
        <div id="slidetitle">Reading university biking society</div>

</div>

The width stays at 960px even when resizing the window to a smaller size. The height only covers the text when it is supposed to extend that. I made it an image and it worked perfectly but then I wouldn't know how I would put the text on top. I would like for it to be fluid but then with page breaks when necessary. And thanks for the link.