CODEWITHSUNDEEP
imagecss
new
new

Reputation:

Responsive image that fit to div

How can I do similar responsive images? Like on this page.

http://pixelgrade.com/demos/border/

I was trying do this with css, but with no effects.

Thanks.

Upvotes: 0

Views: 77

Answers (2)

Sowmya
Sowmya

Reputation: 26969

Use background-size:cover property

html, body{
  height:100%;
}
.responsive_bg{
  background:url("http://upload.wikimedia.org/wikipedia/commons/5/51/ShiFengWaterFall_002.jpg") no-repeat;
  background-size:cover;
  width:100%;
  height:100%
}

DEMO

Upvotes: 2

Sheraff
Sheraff

Reputation: 6702

This image is set as a background-image. Do you have any code to share with us so we might help?

Basically, instead of writing the usual image:

<img src="this/cool/image.png" />

you would use a regular div that you size according to the responsive behavior you want to see:

<div style="background-image: url(this/cool/image.png)"></div>

and the CSS that comes with to style the image (background) itself:

div{
    background-size:cover; // fills the div
    background-position; 50% 50%; //centers the background
    //add here some way to get your div to be the proper size for responsiveness
}

And of course, you use media-queries to add some more responsiveness to the whole shenanigan.

Upvotes: 0

Related Questions