Welcome to WebmasterWorld Guest from 3.80.38.5

Forum Moderators: not2easy

Message Too Old, No Replies

overlap a gif on jpg header

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

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

New User

10+ Year Member

joined:Dec 20, 2007
posts: 3
votes: 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.

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

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 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:

  1. Move the background image to a new
    div
    , let's call it
    <div id="header">

  2. Apply the height of the background image as the height of the
    div
    , plus horizontal centering
  3. Add the animation as an element within the
    div

  4. 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members