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

    Double background images overlaying

    I need two background images to be overlapped. One just being plain gray that repeats but doesn't create scroll-bars and the other to be centered in the middle to help "organize" the web page's content.

    Here's the main part: http://dl.dropbox.com/u/3349370/nearest.gif
    And the plain gray: http://dl.dropbox.com/u/3349370/farthest.jpg

    Basically I just want to combine the two images with "nearest.gif" on top.
    This is how I would like it:
    http://dl.dropbox.com/u/3349370/pic001.jpg

    Any suggestions?

  • #2
    New Coder
    Join Date
    Mar 2010
    Location
    London
    Posts
    78
    Thanks
    0
    Thanked 19 Times in 17 Posts
    use a background-color in place of the grey image:
    Code:
    background-color:#423f28

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by zen-angel View Post
    use a background-color in place of the grey image:
    Code:
    background-color:#423f28
    Then how do I use the "nearest" image as the background for the all the content?

  • #4
    New Coder
    Join Date
    Mar 2010
    Location
    London
    Posts
    78
    Thanks
    0
    Thanked 19 Times in 17 Posts
    Quote Originally Posted by ndm250 View Post
    Then how do I use the "nearest" image as the background for the all the content?
    you apply it as css background to a certain element of your page.. which one depends on your HTML....

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    45
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I would create a background wrapper in css that has the image you are talking about as the background image and a z-index:1;

    Then I would create another div for content. On that div I would do a thin slice of the background image you want and tell it to repeat. So, it can grow with content. If not needed and size doesnt matter then just go ahead and set the second image as the background element for that div with a z-index:15;

    Thats what I would do, but that all depends how you are marking it up.

    Matt

  • #6
    New Coder
    Join Date
    Mar 2010
    Location
    London
    Posts
    78
    Thanks
    0
    Thanked 19 Times in 17 Posts
    1. z-index works only for positioned elements
    2. why do u insist in using a solid color image as background when you can use css to set a color?


  •  

    Posting Permissions

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