Issue
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: http://imgur.com/NAsDsNy
When I use a lower resolution or CTRL + Scroll I see this: http://imgur.com/OHSAvrE
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.
Solution
You can try to use background-size with some percent value (e.g. background-size: 30%
).
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.
Answered By - vbo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.