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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple Backgrounds Help

    Hey,

    I want to have 3 background images layered on each other. It should look like the image below.


    So I want the outline of the mountains on the top of the background.
    A white layer beneath it that sticks out about half an inch on each side.
    A grid which would be set to repeat behind that.

    It should be like layers in photoshop.

    Just note I don't want to do all this in one image. Loading a giant image as a background will kill my bandwidth and speed. If the grid, the largest part of the background is set to "repeat" it will take less time and bandwidth to load.

    Can you guys help me out with the code. I know some html and css to do this. However it is only very basic knowledge learn't from http://www.w3schools.com/

    Thanks for the help!
    Nolan,


  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello nolan,
    Nesting a few div elements will do this for you. Not hard at all.
    What might be harder is the images themselves. Some ps work creating transparent .png's is probably what's needed, that or find your images online.

    Your white border sticking out a 1/2 inch or so, couldn't that be done with a CSS border? Would save you some work.
    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 to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! I understand the nesting thing you mentioned, the link helped.
    However I still am having trouble. How do I layer the images like layers in photoshop. They need to be stacked in order for this to work. Any idea on how to do that?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by nolan View Post
    Thanks! I understand the nesting thing you mentioned, the link helped.
    However I still am having trouble. How do I layer the images like layers in photoshop. They need to be stacked in order for this to work. Any idea on how to do that?
    Something like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	background: #cf0;
    }
    #outer-wrap {
    	margin: 25px;
    	background: #fc6 url(http://www.bottomsupaz.com/wp-content/themes/zeus/images/grid-patterns/preview/grid3.png);
    	border: 25px solid #fff;
    }
    #container {
    	height: 600px; /*demo only*/
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    }
    </style>
    </head>
    <body>
        <div id="outer-wrap">
            <div id="container">
            <!--end container--></div>
        <!--end outer-wrap--></div>
    </body>
    </html>
    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


  •  

    Posting Permissions

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