0
Welcome Guest! Login
0 items Join Now

Backgound image

Last Post
Search Topic
    • Grant's Avatar
    • Grant
    • Hero Rocketeer
    • Posts: 279
    • Thanks: 0
    • iCast Interactive

    Backgound image

    Posted 15 years 7 months ago
    • Hey guys I have a repeating background image for my Afterburnner template. I am trying to get it to repeat both x and y. But it seams to be doing this but it stops on the y axis after about 2 maybe 3 repeats. Any ideas?

      www.siouxcityfuneralservice.com/index.php/test-map

      Thanks for the tips,
      GWitt
    #383113
    • Grant's Avatar
    • Grant
    • Hero Rocketeer
    • Posts: 279
    • Thanks: 0
    • iCast Interactive

    Re: Backgound image

    Posted 15 years 7 months ago
    • No ideas? I really need some help with this... This is the template they want to go with!

      Thanks,
      Grant
    #386263

  • Re: Backgound image

    Posted 15 years 6 months ago
    • Grant,

      I was searching through posts to find an answer to a problem I was having, and stumbled on to your issue. There are two solutions, the first is a bit quicker, and the second probably what you're looking for.

      First, you can change line 17 of your light4.css file from this:
      .background (line 17)
 
{position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
background-image: url(../images/blackleather.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-position: 100% 100%;}

      to this:
      .background (line 17)
 
{position: fixed;
width: 100%;
height: 100%;
background-color: transparent;
background-image: url(../images/blackleather.jpg);
background-repeat: repeat;
background-position: 0 0;}

      The site, as it is now, is tiling the image enough to fill 100% of the height of the screen. Then it stops. So when you scroll down, you see that it hasn't filled out the entire site, just the entire screen. This fix just holds the background in place.

      The second solution is to move the background statement from the background class (.background) and put it in line 16 (#main).

      Change line 17 from this:
      .background (line 17)
 
{position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
background-image: url(../images/blackleather.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-position: 100% 100%;}

      to this:
      .background (line 17)
 
{}

      Yes, empty.

      Then in line 16 (#main) add this line:
       
background: url(../images/blackleather.jpg) 0 0 repeat;padding-bottom:50px;
 

      That should do the trick. There may be a more "correct" way of doing this, but if there is, I don't know it. Also, be sure to make a backup of your css file before you get started. Better safe than sorry.
    #395892

Time to create page: 0.043 seconds