overlap a gif on jpg header

Forum Moderators: not2easy

Message Too Old, No Replies

overlap a gif on jpg header

center a small gif in middle of jpg header...possible?

ExaggerArt

1:29 am on Jul 16, 2008 (gmt 0)

Hi,
I am trying to find the best solution to place a small gif file in the center of a larger background jpg. The jpg position is based on the following css:

body {
margin-top: 220px;
background: #000000 url(images/img01.jpg) no-repeat center top;
}

The jpg is width="900" height="220" the gif is width="306" height="110"

Not sure how to go about it or the best solution. I have heard Explorer does not properly render a position: absolute; approach? The gif is animated and the jpg is a photo...I rather avoid the image quality loss by combing the 2 into a big 900 x 220 animated gif. Not sure if there is an easy solution?
Thanks for any advice.

Setek

4:40 am on Jul 16, 2008 (gmt 0)

Hi ExaggerArt,

It's not so much that Internet Explorer won't render something like this properly (it's not a hard and fast rule,) it's more that sometimes, certain methods of absolutely positioned implementation are somewhat buggy in Internet Explorer.

Looking at your problem, it seems pretty easy to fix. What I would do is:

Move the background image to a new
```
div
```
, let's call it
```
<div id="header">
```
Apply the height of the background image as the height of the
```
div
```
, plus horizontal centering
Add the animation as an element within the
```
div
```
Vertically center as necessary.

As with all my replies, I'd prefer to teach someone to fish rather than just give them one... so I hope you've managed to learn something :)

HTML:

<body>
<div id="header">
<img src="images/animation.gif" width="306" height="110" />
</div>

...

</body>

CSS:

body { margin: 0; /* the div#header will take up that 220px of top space now, no need to get body to do it */ }
div#header {
padding-top: 55px; /* (220 [total height] - 110 [height of image]) / 2 [vertical space above and below image] */
background: #000 url(images/img01.jpg) no-repeat center top; /* Did you know if you have rr gg bb repeating values, you can actually use shorthand for it? For example, #aabbff can be written as #abf */
text-align: center; /* horizontally centering the animated gif */
}
div#header img { vertical-align: bottom; /* this is a trick to stop IE from having an extra little gap below the image */ }

Presto! Let me know how it goes.