#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    10
    Rep Power
    0

    Problem with Background


    I'm redesigning my website comdots.com. I'm puzzled by my body background line. If I delete the repeat-x; statement I get no background, just a white background. What I was expecting was that the background would repeat itself down both sides and across the bottom, which is what want. If I include the repeat-x; statement I get what you would expect and as shown on my website. So what should I change in my style.css file in order to get my background on the top, bottom, left, and right.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    16
    Rep Power
    0
    Originally Posted by stub
    I'm redesigning my website comdots.com. I'm puzzled by my body background line. If I delete the repeat-x; statement I get no background, just a white background. What I was expecting was that the background would repeat itself down both sides and across the bottom, which is what want. If I include the repeat-x; statement I get what you would expect and as shown on my website. So what should I change in my style.css file in order to get my background on the top, bottom, left, and right.
    you can try using repeat without the x or the y, for example:

    body{background:url(images/blackstripe.gif) repeat; text-align:center; font:0.75em Arial; color:#726B67;}

    Cappymoo Media
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    10
    Rep Power
    0
    That worked great, with these exceptions...

    1. Clearly this background doesn't lend itself well to being repeated. Not really a big problem. I'll just find another background.

    2. I'd like the central box to remain with a white background.

    3. Any idea why the repeated background is a different shade to the first line of background?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    16
    Rep Power
    0
    Originally Posted by stub
    That worked great, with these exceptions...

    1. Clearly this background doesn't lend itself well to being repeated. Not really a big problem. I'll just find another background.

    2. I'd like the central box to remain with a white background.

    3. Any idea why the repeated background is a different shade to the first line of background?
    1. I don't see the changes on my end with respect to your background, might be a cache issue on my end.

    2. To make your central box a white background, in your div id=container tag, give it a class and a style and give the style a white background.

    3. Again, I can't see the background being repeated right now so not sure what is going on with that.

    Cappymoo Media
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    10
    Rep Power
    0
    I changed it to a black background, so you can forget about the different shades question. OK. I'll fix up the middle box. Thank you.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    10
    Rep Power
    0
    Got the white background now, but still there is black in the whitespace after the center box content.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    16
    Rep Power
    0
    Originally Posted by stub
    Got the white background now, but still there is black in the whitespace after the center box content.
    Try changing your #bg style to have a background of white. That should do the trick.

    Cappymoo Media
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    10
    Rep Power
    0
    That didn't appear to work. Did I put the background-color:white; in the wrong place?
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    16
    Rep Power
    0
    Originally Posted by stub
    That didn't appear to work. Did I put the background-color:white; in the wrong place?
    Try removing background:url(images/left_bg.gif) repeat-y; from the same style.

    Cappymooo Media
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    10
    Rep Power
    0
    I had to put that background url into the #left to get this to work. But it not perfect. Look at the blank space before the word "Home" and look at the bottom left corner.

    That background pic doesn't appear to be displaying, but without that left background url statement, the left was screwed up.
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    The space before "home" is because the combined width of "#left" and "#right" is a little less than the width of "#container".

    The bottom left corner is white because the "#base" element is after the "#container" element.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo