SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image problems

    on this page: http://billboardfamily.com/about/

    In IE8, the image above the text in the big gray area loads SOMETIMES, but not always, and when it does load....it looks like it STARTS TO repeat once again into the text. Any ideas why this is happening?

    Works like a champ in Firefox.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it this one?
    background: #ffffff url(../images/headerbg.gif) repeat-x 0 0;
    You let it repeat. Should be:
    background: #ffffff url(../images/headerbg.gif) no-repeat 0 0;

  3. #3
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bulevardi View Post
    Is it this one?

    You let it repeat. Should be:
    background: #ffffff url(../images/headerbg.gif) no-repeat 0 0;


    It is this one

    http://billboardfamily.com/wp-conten...aboutus_bg.png

    background: #f2f2f2 url(../images/aboutus_bg.png) no-repeat 0 0;

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you test it without the scroll? And why do you use the top padding 455px?

  5. #5
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What scroll? Also on the padding, this was already done in the original design, and it worked great in Firefox.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like the border-radius.htc you're using is adding inline style to that div of background: none transparent scroll repeat 0% 0%. It's the repeat that is causing the image to repeat (obviously). It doesn't show up in Firefox because FF doesn't apply the .htc (because it doesn't need to). I'd guess that the .htc is also causing problems with the image loading initially too. If you're determined to have rounded corners for IE, I'd think about using http://css3pie.com/ instead.

  7. #7
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen View Post
    It looks like the border-radius.htc you're using is adding inline style to that div of background: none transparent scroll repeat 0% 0%. It's the repeat that is causing the image to repeat (obviously). It doesn't show up in Firefox because FF doesn't apply the .htc (because it doesn't need to). I'd guess that the .htc is also causing problems with the image loading initially too. If you're determined to have rounded corners for IE, I'd think about using http://css3pie.com/ instead.
    OMG! That is the answer. It now works in Firefox, and IE8 on my machine. Thanks!!!!

    Any ideas on a workaround on this issue: http://www.sitepoint.com/forums/showthread.php?t=700381

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    Any ideas on a workaround on this issue: http://www.sitepoint.com/forums/showthread.php?t=700381
    Seems to me Paul's already given you the answer. What else is there to say?

  9. #9
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    What scroll?
    Code CSS:
    background:url("../images/aboutus_bg.png") no-repeat scroll 0 0 #F2F2F2;

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    Code CSS:
    background:url("../images/aboutus_bg.png") no-repeat scroll 0 0 #F2F2F2;
    You've just copied that from Firebug though haven't you? Firebug always adds all the properties when the background shorthand is used. Check the actual CSS file, scroll's not there:

    Code CSS:
    background: #f2f2f2 url(../images/aboutus_bg.png) no-repeat 0 0;


Bookmarks

Posting Permissions

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