CODEWITHSUNDEEP
htmlcss
Ran
Ran

Reputation: 3

Dynamic resizing of images

So i have this image right here

"https://i.sstatic.net/L6gO9.png"

My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.

It becomes like this

"https://i.sstatic.net/FSScp.png"

I've been trying to figure this out for a while. Can anyone point me in the right direction?

   #MassEffectSign {
        background: url(masseffect12.png) center top no-repeat;
        top: 25px; left: 750px; z-index: 2;
        padding: 250px;
        position: absolute;
    }

My blue background

#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }

Upvotes: 0

Views: 57

Answers (3)

Alecg_O
Alecg_O

Reputation: 1041

Use percents for the relevent values.

top: 25px; left: 45%;

This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.

Upvotes: 0

Milosz
Milosz

Reputation: 11

Use img tag instead background image in CSS.

img {width: 100%}

Upvotes: 1

Nitesh
Nitesh

Reputation: 15739

Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.

For instance,

<div style="position:relative;">
   <div id="MassEffectSign">&nbsp;</div>
</div>

Hope this helps.

Upvotes: 0

Related Questions