Background Image Alignment

  • georgia

    (@georgia)


    20 years ago

    Hello. I’ve made a template using the Kubrick theme but used my own images. The background image aligns perfectly with the header and footer images in IE, but in all the other browsers it’s a couple of pixels off.
    Is it possible to use an if/then command and use two different background images?? Like if using IE, then use image A. If using Firefox, then use image B?? How would I write this?

    Thanks for any help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • kiddeath91

    (@kiddeath91)

    Yes you can. For IE only use the asterisk selector like this:

    * html body {background-image:xxx}

    That will tell only IE 6/Win to serve the image. All others will get your normal CSS declaration. I think IE 5 is effected too.

    Thread Starter georgia

    (@georgia)

    Thanks, Kiddeath91. I’m not sure where to put that. I added in the styles in header.php (see below), but it’s not working. Do I need to put in styles.css instead?

    <style type=”text/css” media=”screen”>

    /* BEGIN IMAGE CSS */
    /* To accomodate differing install paths of WordPress, images are referred only here, and not in the wp-layout.css file. If you prefer to use only CSS for colors and what not, then go right ahead and delete the following lines, and the image files. */

    body {
    background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/”); }<?php /* Checks to see whether it needs a sidebar or not */ if ((!$withcomments) && (! is_single()) && (! is_page())) { ?>

    #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/bgC.gif”) repeat-y top; border: none; } <?php } else { // No sidebar ?>
    #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/bgC.gif”) repeat-y top; border: none; } <?php } ?>
    #header { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/WPheader.gif”) no-repeat top center; }
    #footer { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/WPfooter.gif”) no-repeat bottom; border: none;}
    * html>body { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/bgA.gif”) repeat-y top; border: none; }

    /* Because the template is slightly different, size-wise, with images, this needs to be set here. If you don’t want to use the template’s images, you can also delete the following two lines. */

    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 127px; width: 761px; }
    #headerimg { margin: 7px 9px 0;}
    #footer { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 291px; width: 761px; }

    /* END IMAGE CSS */

    /* To ease the insertion of a personal header image, I have done it in such a way,
    that you simply drop in an image called ‘personalheader.jpg’ into your /images/
    directory. Dimensions should be at least 760px x 200px. Anything above that will
    get cropped off of the image. */

    /*
    #headerimg { background: url(‘<?php bloginfo(‘stylesheet_directory’); ?>/images/personalheader.jpg’) no-repeat top;}
    */

    </style>

    kiddeath91

    (@kiddeath91)

    Try styles.css. This is an IE only command, so it should be fine sitting in your style sheet.

    Thread Starter georgia

    (@georgia)

    Got it! Thank you so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Background Image Alignment’ is closed to new replies.