problem with cross browser compatible css code

  • SearlNet
  • Born
  • Born
  • SearlNet
  • Posts: 2

Post 3+ Months Ago

I an trying to center a background image. In IE 6.0 and 7.0 it work fine. In firefox it does not. It's pushed to the top.

This is the code I am using.

Code: [ Select ]
<style type="text/css">
center center;
  1. <style type="text/css">
  2. body
  3. {
  4. background-image:
  5. url('Images/background.jpg');
  6. background-repeat:
  7. no-repeat;
  8. background-position:
  9. center center;
  10. }
  11. </style>

I need this to work for all major browsers. Any help would be great.

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5143
  • Loc: SC-USA

Post 3+ Months Ago

They way Firefox renders things, you'll likely need to have content before it regards your page as having any height.

Try adding some content and see if FF doesn't reposition the background image.

If you read the standard for background-position, I believe this is one place where IE get its right and FF get's it wrong.

I think FF will do what you want if you set the background-attachment to 'fixed'. Not sure if that's what you want, though.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8485
  • Loc: USA

Post 3+ Months Ago

I also noticed this problem on my machine with one of my projects. Try putting the images in the same folder where you have the CSS code calling on it.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.