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 kannaya pesari
kannaya pesari
93 Points

Background-image..... Responsive?

/HTML/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Practise</title> <meta name="description" author-name="Arun-Pesari"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--CSS--> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="images one"></div> <div class="sections"></div> <div class="images two"></div> <div class="sections"></div> </body> </html>

/CSSmain.css/ html,body{ width:100%; height:100%; } body{ margin: 0; background: black; } .images, .sections{ display: block; width: 100%; height:100%; } .sections{ height:20%; background: purple; } .one{ background: url('../images/1.jpg'); background-repeat: no-repeat; background-size: cover; } .two{ background: url('../images/2.jpg'); background-repeat: no-repeat; background-size: cover; }

2 Answers

Philip Gales
Philip Gales
15,193 Points
Philip Gales
Philip Gales
15,193 Points

Explain what you mean by responsive.

kannaya pesari
kannaya pesari
93 Points

the background image which i have added twice here is not scaling itself according to the screen as,,,,, that is not responsive image...so how can i make background images responsive???

Alexander Acker
Alexander Acker
18,123 Points
Alexander Acker
Alexander Acker
18,123 Points

Setting your background images to cover should help the image scale down appropriately with the rest of the viewport until it reaches the original width of the image that your working with. I would try setting a media query at the breakpoint where the image stops being responsive and set the background size to a particular width to ensure you're maintaining the background height. If this doesn't work perhaps try utilizing an IMG element within the DIVs and set your width to 100% and height to auto.

http://codepen.io/alexacker08/pen/ENqobO

Hope this helps.