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 to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to use 2 background images which have gradient..

    hi guys,

    I have 2 background images one called bg which is 18x1024 which i let repeat through whole site and one that is 1240x992 I actually want it to look like www.me.com but it doesnt work, my logo isn't on the left site tho it's in the middle of the page..
    and I want the page to fill one whole screen.

    anyone any suggestions?

    greetings

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    What do you have so far? We can't do much if we can't see the code and especially the images. A link to your page would be the most helpful thing.

    You do know that you can place background images on both the <html> and <body> tags, right? That's how many sites create these complex backgrounds.
    matt | design | blog

  • The Following 2 Users Say Thank You to BoldUlysses For This Useful Post:

    CaptainB (02-27-2009), oesxyl (02-27-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello nypride,
    msuffern has a good suggestion there. The technique is called nesting divs. Put your biggest background image on html, your next level image on body and you can have as many more levels as you'd like by creating more divs.

    We'll need the images to be much more help than that.
    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

  • The Following 2 Users Say Thank You to Excavator For This Useful Post:

    CaptainB (02-27-2009), oesxyl (02-27-2009)

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wanted to make it like www.me.com so you can use those 2 images to get an idea:
    https://auth.apple.com/my/auth/login...default_bg.jpg

    https://auth.apple.com/my/auth/login...tiles_left.jpg

    just that my "tiles_left.jpg" is a logo in the center of the page

    thank you for all the help you given till now

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    here's a start:
    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 {
    	height: 100%;
    	width: 100%;
    	background: url(https://auth.apple.com/my/auth/loginForm/de/1J32/images/default_bg.jpg) repeat-x;
    }
    body {
    	height: 100%;
    	width: 100%;
    	font: 12px "Comic Sans MS";
    	text-align: center;
    	background: url(https://auth.apple.com/my/auth/loginForm/de/1J32/images/tiles_left.jpg) no-repeat left center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
        <!--end 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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    It might look better if we move that second image down so it lines up with the background image. Try changing the above CSS to this:
    Code:
    body {
    	height: 100%;
    	width: 100%;
    	font: 12px "Comic Sans MS";
    	text-align: center;
    	background: url(https://auth.apple.com/my/auth/loginForm/de/1J32/images/tiles_left.jpg) no-repeat left 129px;
    }
    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
    •