Results 1 to 2 of 2

Thread: CSS Background Cuts Off - IE

  1. #1
    Join Date
    Nov 2007
    Posts
    1

    CSS Background Cuts Off - IE

    I am using a CSS and repeating background image to achieve a gradient background.

    The background looks great in all browsers except, of course, IE (I'm using 5.2 for Mac), where the background abruptly ends near the end of the page:

    http://www.unitedservicesofamerica.com/windows.htm

    Any advice would be much appreciated! Thanks!

    -Michelle

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    On my two computers with resolutions 800*600 and 1024*768 I couldn't see the problem.

    I checked your repeating image usablue3gradient1000.jpg and noticed that it is 1px wide x 1000px high. I then noticed that your stylesheet has
    body {
    background-color: #FFFFFF;
    background-image: url(images/usablue3gradient1000.jpg);
    background-repeat: repeat-x;
    }
    repeat-x will only repeat horizontally so it is not repeating vertically so I assume you have a screen resolution over 1000px high.

    To repeat in both directions delete background-repeat: repeat-x or edit to background-repeat: repeat; but this would start the darker color again so you need to stretch the gradient to say 1600px to suit most screen resolutions. Use

    http://tools.dynamicdrive.com/gradient/

    Don't forget that browsers have a default body margin of 20px so if you are seeing this round the top, sides and bottom add margin: 0; to the body style.
    Last edited by Wickham; 28 Nov 2007 at 02:01 AM.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. css background image alignment only works for IE
    By pokinski in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 06 Feb 2007, 08:24 AM
  2. how to set a background image with CSS
    By webguy_dave in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 17 Dec 2005, 02:05 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •