Responsive image in CSS

Question

I have a problem creating a responsive image (the cloud) using CSS. I want that cloud to be fixed.

This is my HTML:

<div class="r-img" style="background:url(./img/cloud.png); width:587px; height:330px;">
</div>

This is my css:

.r-img img{
    top:30px;
    right:5px;
    overlow:hidden;
    display: block;
}

I want the page to look like this: https://i.stack.imgur.com/duhen.jpg

When I use a lower resolution or CTRL + Scroll I see this: https://i.stack.imgur.com/8kHcy.jpg

I just want the image to stay fixed when someone use ctrl + scroll or when someone access the page with a lower resolution than mine. My resolution is 1920 x 1080.

as far as I know, this is not possible. Zooming makes everything bigger, including backgrounds. — Joeytje50, Jan 23 '14 at 14:36
you have added the image as a backgound image so you cannot apply any styles to it unless you use background-size and background-position, etc. If you add it using an image tag then your above css will work. To detect zoom level of the browser you would need something like [this](http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers) then you could resize your image accordingly — Pete, Jan 23 '14 at 14:36
Just a note, you may have just added it to your question wrong, but you have "overlow" instead of "overflow" in your CSS. — DBS, Jan 23 '14 at 14:44

vbo · Accepted Answer · 2014-01-23T15:11:02.283

1

You can try to use background-size with some percent value (e.g. background-size: 30%).

DEMO

Percent value here is a key: when using it sets background size relative to the background positioning area. When browser window zoomed this area changes accordingly. So visual effect is that image size is the same no matter what zoom level is.

edited Jan 23 '14 at 15:11

answered Jan 23 '14 at 14:40

vbo

13,583
1
25
33

score 0 · Answer 2 · edited Jan 26 '17 at 06:21

Place the image inside a container whose dimensions are defined and then place inside the image and maximize it`s size to 100%.

img { position:absolute; max-width: 100%;}

That way, the image size will always change, but the changes will respect the dimensions and proportions of the container (parent). This is called image resizing under the scope of RESPONSIVE DESIGN.

To assign dimensions to the image container, use fluid grid dimensions, like:

.2_cols {width: 153px;}

or if want a 100% width:

 .12_cols {width: 920px;}

Other method is to use a background image:

  body.cloud { 
        background: url(/img/ban_home.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: absolute; z-index: -1;
        }

score 0 · Answer 3 · edited Dec 27 '21 at 05:14

Everything is funnier with @media (into your css):

@media (max-width: 767px) { 
  // Your css (of the image) when you are on mobile
}
@media (min-width: 768px) and (max-width: 991px) {
  // Your css (of the image) when you are on tablets
}
@media (min-width: 992px) and (max-width:1199px) { 
  // Your css (of the image) when you are on medium screen
}
@media (min-width: 1200px) {
  // Your css (of the image) when you are on large screen
}

This could help you to handle your image better.

Just configure your size wherever you want:

.r-img {
   width:587px; 
   height:330px;
   ...
}

score -1 · Answer 4 · answered Jan 23 '14 at 14:43

Check out http://www.w3schools.com/cssref/css3_pr_background-size.asp for sizing a background image. Zooming into the page will make everything bigger, but people on smaller screens will see the image as the exact same size as you unless you use percentages on your widths and heights.

To test different resolutions instead of zooming in and out, just change the browser window to different widths and heights. Firefox and IE11 now have responsive tools to change the browser window to the different resolutions of screens which you can use to test your websites.

Responsive image in CSS

4 Answers4