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 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    One background covers, one repeats x and y

    Basically, I want to use two background images for my body div. I want one to cover the whole page, and one to repeat by x and y. How could this be done?

    I was following this: http://icode4you.net/css-tricks-use-...es-for-one-div, but it doesn't explain how to make one background cover the whole page, without repeating, while having another background repeating.
    Last edited by johnnycabbage; 11-25-2012 at 12:34 AM. Reason: forgot somthin

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello johnycabbage,
    It's kind of hard to tell without seeing your images but I'm guessing the image you want to fill the whole page needs to dynamically resize to different resolutions without skewing the height/width ratio.
    That would require a bit of js - http://johnpatrickgiven.com/jquery/background-resize/

    Then you could add a 100% height/width container that would repeat your other image.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    One image was a gradient, the other was a 10x10 square.

    I don't know why, but I'm avoiding using Javascript on my site. I'll dive into that language one day.

    But anyways, I found the right css syntax to do so:
    PHP Code:
    background:url(gradient.png), url(greensquarevector.png);
    background-sizecover5px 5px


  •  

    Posting Permissions

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