Results 1 to 3 of 3
  1. #1
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Two background images. Is this the best way?
    I'm helping a friend with her website, and she has one main background image, but when content is added to the page, it pushes it down past the image. So I added a 2nd image to repeat along the body to fill in when the page is pushed down.

    This is how I managed to get it working, this is in the CSS style sheet.

    Code:
    html{
    background-image:url(img/image2.png);
    	background-position:top center;
    	background-repeat: repeat-y;
    }
    
    body{
    background-image:url(img/image1.png);
    	background-position:top center;
    	background-repeat: no-repeat;
    }
    Seemed the only way I could get it to work was by putting the 2nd repeating image in the html part, then put the 1st image in the body, which covered the 2nd repeating, with the repeating continuing down past it.

    Hopefully I'm making sense?

    My only thought was, with the images on top of each other, could that slow the website's load time down or no? I had thought I could have the 2nd image start at the bottom of the 1st, if that is possible? Or don't worry, should be fine?

    And yes, there is more code.. but I just showed the important part, lol.

    Thanks for any replies.

  2. #2
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    LOL, I think I'm having one of those days where nothing codes right?

    I found out the above method isn't the best, it doesn't work in Firefox. Only works in IE. In Firefox it only loads a part of background image 1.

    Anyone know a fix or a way to just have background image 1, then background image 2 start under it?

  3. #3
    ABW Ambassador
    Join Date
    June 30th, 2007
    Location
    Syracuse, NY
    Posts
    677
    Okay, think I'm good now, but hopefully someone else can learn from this, LOL.

    Working in Opera, IE, and Firework. All I needed to do was tell the code the size of the image in the body and it stopped cutting it off.

    Code:
    html{
    background-image:url(img/image2.png);
    	background-position:top center;
    	background-repeat: repeat-y;
    }
    
    body{
    background-image:url(img/image1.png);
    	background-repeat: no-repeat;
               height: ###px;
    	width: ###px;
    }

  4. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Free images? good quality images cheap?
    By breakingtheborders in forum Blogging, Mobile and Social Media
    Replies: 0
    Last Post: November 18th, 2011, 09:47 AM
  2. Ugg Images = Copyrighted images!
    By it2shoes in forum Commission Junction - CJ
    Replies: 16
    Last Post: March 13th, 2009, 08:32 AM
  3. Do you have Business Background
    By buy_online in forum Midnight Cafe'
    Replies: 0
    Last Post: January 20th, 2003, 04:08 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
  •