1

I am working with a scalable background image using CSS. I am using a div tag container with a nested AP div that contains an animated flash logo that I want to be scaled down together with the background image.

I have two problems that I have been researching about all day and I can´t seem to fix:

  1. when I scale down the browser to test the image, the AP div shifts position and does not stay in the exact spot where it is supposed to be. It moves a bit upward or downward depending on the browser.

  2. I can´t get it to work in Internet Explorer.

I have read as many Q/A and visited many forums and am at the end of my wit. Any help will be GREATLY appreciated. Thanks!!!!!

The site test can be viewed at www.casadeoracionvida.org The behavior I want is that the logo is always over the white spot (the clouds), whether scaled or not and in any browser.

This is my entire code:

<head>




.imgwrapper {
height: 100%;
width: 100%;

}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(img/bluesky.jpg);
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

#logo {
position: absolute;
width: 23%;
height: 47%;
z-index: 1;
left: 40%;
top: 40%;

}

</head> 

<body>

<div class="imgwrapper"> <div id="logo"> 
<object id="FlashID" width="100%" height="100%">
<param name="movie" value="logo1.swf" /> </div> </div>

</body>
</html>
Oliver Hader
  • 4,093
  • 1
  • 25
  • 47
Sara
  • 59
  • 1
  • 3
  • 8

1 Answers1

0

it's difficult to fix your code without almost completely rewriting it as I believe it is Dreamweaver-generated.

Here's my take on it :

<style>
body
{
    margin:0px;
    background: url(img/bluesky.jpg) no-repeat center top;
    background-size:100%;
    background-size:cover;
}
#globalWrap
{
    display: table;
    width:100%;
    height:100%;
}
#logoWrap
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#logo
{
    width:23%;
    display:inline-block;
}
</style>

<body>
<div id="globalWrap">
<div id="logoWrap">
<div id="logo">
<object id="FlashID" width="100%" height="100%">
<param name="movie" value="logo1.swf" />
</object>
</div>
</div>
</div>
</body>

Notes :

  • this is a bit of a hack, but it's known as one of the most reliable ways of centering an element both horizontally and vertically
  • I added a background-size:100%; - this makes the background stretch in old browsers where cover isn't available
  • I'd put the display:table on the body to avoid adding two wrapper divs, but I'm a bit wary of changing the body's display type
Orteil
  • 439
  • 6
  • 16