0

I have a webpage that consist of 4 different div elements set in columns. The page have no scrolling so all content is on screen. My question is how to disable div backrounds zooming when zooming content because it ruins the page structure. And ofcourse that should work in eveycase because I'm using different backround sizes trought Media Queries. My fist question is is that possible anyway, and will it work in IE8.

CODE:

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

#container {
    display: table;
    width: 100%; height:100%;
    border-spacing: 1px;
    background-color:black;
    margin-left:auto; margin-right:auto;
}

#container > div {
    display: table-cell;
    padding:0px;
}

body,html{ height:100%; width:100%; overflow:hidden; }

#div1{ position:relative;   
         background-image:url(../images/bg/left.jpg);
         background-size: cover;
     background-repeat:no-repeat;
  }
#div2{height:100%;
     background-image:url(../images/bg/center.jpg);
     background-size: 100% 100%;
     background-repeat:no-repeat;
     position:relative;
  }

#div3{height:100%; 
    background-image:url(../images/bg/right.jpg);
    background-repeat:no-repeat;
background-size:cover;
    position:static;    
  }

#div4{ height:100%; 
     background-image:url(../images/bg/right2.jpg);
     background-repeat:no-repeat;
 background-size:100% cover; 
 position: static;
 background-repeat:no-repeat; 
   }
vals
  • 61,425
  • 11
  • 89
  • 138
Tomi87
  • 21
  • 1
  • 4
  • 2
    I don't think you can do it. Try reading this: http://stackoverflow.com/questions/6458793/can-i-stop-the-resizing-of-elements-on-zoom – Itay Aug 18 '13 at 12:48

1 Answers1

0

To make the div size invariant of zooming (But not contents inside it) do the following :
Inside your css for that div :

min-width: 100%;
max-width: 100%;

This will freeze the width, you can do the same for height too.

Hemanth Malla
  • 405
  • 1
  • 5
  • 9