CSS image to become smaller when browser is resized

Question

I have used a background image on the webpage and used this code in the css which makes it nicely resize when browser is resized.

body{   
    background: url("images/back.jpg") no-repeat  ;
    background-size: cover;
}

I need to place some other image on top of the background image at a specific place ( vase on table) .but when i do that then the background gets resized but the vase image remains in the same place and same size when browser is resized as shown in second picture below.

see the vase in these two images

browser in full size

resized browser

how can i make the vase image also get resized just like the background

Billy there is a mouse hover which changes the colour of the vase that is why it has to be another image — JanetOhara, Nov 05 '12 at 12:39
Asad I am using this but i tried to change to relative also but no help #img1{ height: 167px; width: 163px; background-size: 100% auto; left:500px; top:210px; position:absolute; } — JanetOhara, Nov 05 '12 at 12:40

score 1 · Answer 1 · answered Dec 09 '16 at 21:50

I recently ran into exactly the same issue creating a hidden object game which needed images placed on top of a background image to maintain their position regardless of browser dimensions.

Here's what I did:

You can include a template version of the background image as an actual <img> with visibility:hidden (so it's not visible but still takes up it's space in the DOM and base the size (and background image size) based on that.

HTML:

<div class="image-container">
    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template">
    <div class="item"></div>
</div>

CSS:

/* This is your container with the background image */
.image-container {
    background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
    background-size:100%;
    overflow-x: hidden;
  position:relative;
}

/* This is the template that resizes the DIV based on background image size */
img.img-template {
    visibility: hidden;
    width:100%;
    height:auto;
}

/* This is the item you want to place (plant pot) */
.item {
    position: absolute;
    left: 14.6%;
    bottom: 80.3%;
    width: 15%;
    height: 15%;
    background: yellow;
    border: 2px solid black;
}

Here is a working example: http://jsfiddle.net/cfjbF/3/

score 0 · Answer 2 · answered Nov 05 '12 at 14:26

Try making the image relative position and setting the alignment manually.

http://jsfiddle.net/cfjbF/1/

<head>
    <style>
        body {
            background: #000000;
        }

        #image1 {
            background: #008000;
            position: relative;
            left: 50px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<div id="image1"></div>
</body>

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

Solution for your Problem:

https://stackoverflow.com/a/7660978/1256403

OR

http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

edited May 23 '17 at 12:24

Community

1
1

answered Nov 12 '12 at 04:30

Avin Varghese

4,340
1
22
31

CSS image to become smaller when browser is resized

3 Answers3