Ordering Repeat BG Image Question

Discussion in 'HTML & Website Design' started by southwark, Nov 13, 2014.

  1. #1
    Hi,
    is it possible to insert alternate images into a repeating background image?

    For example, I have a 5cm x 5cm block of wood grain which repeats as a background image on my website so it looks like a wooden desk background.

    I would like to put an image of a photo on that background about halfway down the page but I only want that photo to appear once and the rest of the background to remain as 'wood'. The way I'd like to do this is photoshop the photo onto a copy of the repeat wood background image, put in a drop shadow on it and run it along with the background image - is that possible?

    IF not...

    Could I create, say, 10 background images of page width 100% and depth, say 10cm. Then run them - in order - down the page, so that the 3rd down has a photo on it and the 7th one has another image.

    One suggestion I read was to set each rendering of the bg image seperately in CSS. Something like this:

    background-image: url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwoodwithphoto.png),url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png), url(img/bgwood.png) ;
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x ;

    Which I tried but I couldn't get it to work - although it seems a poor way to do it, if it is possible.

    Thanks for reading.
     
    southwark, Nov 13, 2014 IP