Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background images

    Is it possible to have multiple background images line up next to each other rather than on top of each other. See, I have 6 small(64x64) picutres, and I want it to show them all in order, then repeat.

    So like this

    1,2,3,4,5,6,1,2,3,4,5,6,1,2
    3,4,5,6,1,2,3,4,5,6,1,2,3,4
    5,6,1,2,3,4,5,6,1,2,3,4,5,6

    Is this possible, or do they have to overlap each other?
    Last edited by Deathtracker; 08-07-2012 at 07:31 AM. Reason: To make clear on pictures

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is it necessary for them to be separate images, it would be easier to make 1 image repeat as you require. If you stitch the images together in an image editor side by side then use
    Code:
    background-image:url('stitchedImg.png');
    background-repeat:repeat-y;
    this will repeat the image vertically down the container.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by Deathtracker View Post
    Is it possible to have multiple background images line up next to each other rather than on top of each other. See, I have 6 small(64x64) picutres, and I want it to show them all in order, then repeat.

    So like this

    1,2,3,4,5,6,1,2,3,4,5,6,1,2
    3,4,5,6,1,2,3,4,5,6,1,2,3,4
    5,6,1,2,3,4,5,6,1,2,3,4,5,6

    Is this possible, or do they have to overlap each other?
    Why not make a collage image and cut it so it will tile nicely? Any good graphics editor will do that, plus, there are lots of free online collage makers. CSS 3 uses multiple backgrounds.
    ☠ ☠RON☠ ☠

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See, the images are gifs, and I'm unaware of how to do what you guys said with them. All of the gifs have the same amount of "frames" but I don't know how to edit/use them. Can I just specify something so instead of being on on top of another, that they would file next to each other? If not, it's fine!

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    If you have six images, make six classes of divs for each image, make as many copies of the divs as you need and float them into a larger div.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How would I do that, haha? I'm sorry, I've never used div for background images. Would that technique also repeat to the next "line" of background after it hits the right edge?

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by Deathtracker View Post
    See, the images are gifs, and I'm unaware of how to do what you guys said with them. All of the gifs have the same amount of "frames" but I don't know how to edit/use them. Can I just specify something so instead of being on on top of another, that they would file next to each other? If not, it's fine!
    Doesn't matter what format they are as long as they are web safe. Six 64X64 images would be 384 pixels wide. If you are careful to make page the right width/height, you could have one collage image of all six images repeat horizontally/vertically in the background.

    Collage Makers:

    Create collages based on shapes or words, all for free: http://www.getloupe.com/
    Picture2Life is a powerful, but simple and easy-to-use online image editor which also allows you to create collages and animated gif's (or animations): http://www.picture2life.com/Tour/Default.aspx
    http://www.dundoo.com/create.php (Collage Album Maker)
    http://www.makeuseof.com/dir/hockney...age-generator/ ( Photo Collage Generator)
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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