SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Having multiple background using divs

    Hi.

    TAKE A LOOK AT: http://i.imgur.com/SVosv.jpg after you've read the text.

    What I want here, is a 400px high div with a background filling the full width and the other div under with another background.
    These divs should just be the backgrounds, and my content on the page shouldnt affect any of these div's in any way.

    The background div's in my case is #förstabg and #andrabg.


    I'm not sure if im doing right with this but anyhow a problem occured.

    #andrabg wich is my second background is not behind my imageslider wich is #slider.

    What am I going to do?



    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AirWipp</title>
    <link href="css/styles.css" rel='stylesheet' type='text/css'>
    <link href="css/reset.css" rel='stylesheet' type='text/css'>
    
    </head>
    
    <body>
    
    
    
    <div id="förstabg">
    
    
    <div id="upper">
    
    
    <div id="mainlogo">
    
    <img src="images/logo.PNG" width="359" height="56" />
    
    </div><!---MAINLOGO SLUT--->
    
    <div id="meny">
    
    </div><!---MENY SLUT--->
    
    
    </div><!---UPPER SLUT--->
    
    
    <div id="slidercontainer">
    
    <div id="slider">
    
    </DIV><!---SLIDER SLUT--->
    
    
    </div><!---SLIDERCONTAINER SLUT--->
    
    
    
    </div><!---FÖRSTABG SLUT--->
    
    
    
    <div id="andrabg">
    
    </div><!---ANDRABG SLUT--->
    
    
    </body>
    </html>

    CSS:

    Code:
    body { background-color: #101112; background-image:url(../images/dirtTextureBgTile.png); background-repeat:repeat-x; background-position: center top; min-width: 960px; min-height: 100%;}
    
    #förstabg {background-image:url(../images/headerHomeBgTile.png);  max-width:100%; max-height:450px; padding-top:1px;  }
    
    #andrabg {background-image:url(../images/Undermitter.png);  max-width:100%; height:450px;  }
    
    #upper {width:960px; margin:0 auto; height:70px; margin-top:50px; }
    
    #mainlogo { height:70px; float:left; }
    
    #meny{ height:70px; width:500px; float:right; background-image:url(../images/tapeTopnavBg.png); background-repeat:no-repeat; background-color:transparent }
    
    #slidercontainer {
    	padding: 35px 0 112px 0;
    	background-image:url(../images/heroLightingBg.png);
    	background-repeat:no-repeat;
    	background-position: top center;
    } 
    
    #slider {width:960px; height:400px; margin:0 auto; background-image:url(../images/Slidertest.jpg); background-color:#CCFF66; }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    #andrabg wich is my second background is not behind my imageslider wich is #slider.

    What am I going to do?
    If you want multiple backgrounds like that, the trick is to nest divs within divs. Your andrabg div is outside the slider div.

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I did so the #andrabg starts just before the slider, and then the bg starts just where the slider picture is. What i want, as in the website have the background at halfways the sliderpicture.

    How do I do that, cause positioning the background dosent make any difference?
    Quote Originally Posted by ralph.m View Post
    If you want multiple backgrounds like that, the trick is to nest divs within divs. Your andrabg div is outside the slider div.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Sorry, it's not really clear. Could you post an image of what you actually want, or put this up live somewhere?

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I can see the picture posted in the first post, but other than the two elements labeled there, I don't know who/where all the other boxes are, so I can't see what's going on.

    is undermitter the jumping dude pic? and does homebgtile have the fw and the greyish block on it, or is homebgtile just the wallpaper tiled and the fw is logo.png? and is then the grey area a bg for menu? Where is slideshow? What part of the code is the text supposed to be that is sitting at the bottom of jumping dude? is jumping dude actually reaching down to the yellow line?

    We could build the code you have now if we had also access to teh images you're using, or you could post something live, so we could see better what's going on.

  6. #6
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I gona tell you, since I cant post live now. :/

    #body is just a grungy background.

    #förstabg is just a transparent picture with some circles in it like the website i linked.
    #andrabg is just the kinda greyish background.

    #upper is just the holder of #mainlogo & #meny

    #meny is just a menu background and has nothing to do with the other stuff.

    #slidercontainer is my container for my #slider, #slidercontainer has a bg wich has neither nothing to do with my problem. (I guess, :P )


    body {

    Quote Originally Posted by Stomme poes View Post
    I can see the picture posted in the first post, but other than the two elements labeled there, I don't know who/where all the other boxes are, so I can't see what's going on.

    is undermitter the jumping dude pic? and does homebgtile have the fw and the greyish block on it, or is homebgtile just the wallpaper tiled and the fw is logo.png? and is then the grey area a bg for menu? Where is slideshow? What part of the code is the text supposed to be that is sitting at the bottom of jumping dude? is jumping dude actually reaching down to the yellow line?

    We could build the code you have now if we had also access to teh images you're using, or you could post something live, so we could see better what's going on.

  7. #7
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you dont understand, I just want two different background splitted in halfway of the screen. thats basically it.

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    If I understand what you're after, you could make one div the width of your content and apply andrabg to that. Inside that div, make a second one, same width and 400px high and apply förstabg to it. Does that make sense?

  9. #9
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I guess not since the background should be 100% wide.

    Right now i have a the #andrabg div before my slider div and at the end. So the background starts just where my slider div starts and ends at the end. I want the background to start halfway my slider picture, But i dont know how to get it there.

    Quote Originally Posted by TechnoBear View Post
    If I understand what you're after, you could make one div the width of your content and apply andrabg to that. Inside that div, make a second one, same width and 400px high and apply förstabg to it. Does that make sense?

  10. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    I guess not since the background should be 100% wide.
    Then set the main background andrabg on body, and make a second div, 100% wide, to hold the förstabg. You've already said you want that div 400px high, but set the height to whatever it takes to get it to end half-way down your slider.

  11. #11
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh, im getting confused. Could you take it a bit more detailed. I'm sorry for being a little retarded sometimes, but still, I'm 17 and learning.


    Quote Originally Posted by TechnoBear View Post
    Then set the main background andrabg on body, and make a second div, 100% wide, to hold the förstabg. You've already said you want that div 400px high, but set the height to whatever it takes to get it to end half-way down your slider.

  12. #12
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I hope you don't get angry because I don't understand. I would be sooo glad if you could help me.

  13. #13
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    No, of course I'm not angry. I was very tired last night and probably not explaining myself very well. I think you're trying to achieve something like this:
    backgrounds.png

    The code for that is very simple:
    Code:
    <body>
    <div id="background2">
    
    <div id="content">
    <img src="slider.jpg" width="1000" height="400" alt="This is a kid-on slider" />
    
    </div>
    
    </div>
    </body>
    Code CSS:
    body {background-image:url(main-background.jpg); 
    		margin: 0;
    		padding: 0;
    		}
     
     
    #background2 {background: url(background2.jpg) repeat-x;
    	margin: 0;
    	padding: 0;
    	min-height: 400px;
    	}
     
    #content {width: 1000px;
    	margin: 0 auto;
    	}
     
    img {padding-top: 200px;}

    Does that help at all? The background-image used for the top of the page is 400px high and repeats horizontally.

  14. #14
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your answer.

    What I have is my body background.

    You only made 1 div with a BG. I need two div's with backgrounds, and those two divs should meet halfway of the sliderpicture.
    So basically I use three background.

    That's what I cannot fix.



    Quote Originally Posted by TechnoBear View Post
    No, of course I'm not angry. I was very tired last night and probably not explaining myself very well. I think you're trying to achieve something like this:
    backgrounds.png

    The code for that is very simple:
    Code:
    <body>
    <div id="background2">
    
    <div id="content">
    <img src="slider.jpg" width="1000" height="400" alt="This is a kid-on slider" />
    
    </div>
    
    </div>
    </body>
    Code CSS:
    body {background-image:url(main-background.jpg); 
    		margin: 0;
    		padding: 0;
    		}
     
     
    #background2 {background: url(background2.jpg) repeat-x;
    	margin: 0;
    	padding: 0;
    	min-height: 400px;
    	}
     
    #content {width: 1000px;
    	margin: 0 auto;
    	}
     
    img {padding-top: 200px;}

    Does that help at all? The background-image used for the top of the page is 400px high and repeats horizontally.

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    You mean like this?
    3backgrounds.png
    Code:
    <body>
    <div id="background1">
    
    <div id="content">
    <img src="slider.jpg" width="1000" height="400" alt="This is a kid-on slider" >
    
    </div>
    
    </div>
    </body>
    Code CSS:
    body {background-image:url(main-background.jpg); 
    		margin: 0;
    		padding: 0;
    		}
     
     
    #background1 {background: url(background1.jpg);
    	width: 1020px;
    	margin: 0 auto;
    	padding: 0;
    	min-height: 800px;
    	}
     
    #content {width: 1020px;
    	margin: 0 auto;
    	background: url(background2.jpg) repeat-x;
    	text-align: center;
    	}
     
     
     
    img {padding-top: 200px;}

    (And there's no need to always quote a post when you reply to it - it makes for an awful lot of unnecessary scrolling. )

  16. #16
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ill come back with a picture describing exactly how I want it in some hours.
    Quote Originally Posted by TechnoBear View Post
    You mean like this?
    3backgrounds.png

  17. #17
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Im not sure if this is described enough.

    But basically I wanna have my body background image to be all over the site.
    Two divs with that meets halfway in at my slider picture.

    At this picture the green and grey is only showing the divs with my custom background images, but my body background image is a BG thats gona be all over my website. You may think...Why does he have a body background when he have two divs overlapping the body background. One of my div backgrounds is semi transparent, so the body bg and div bg will both be shown.

    http://i.imgur.com/EmBBv.jpg

  18. #18
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    That seems to be pretty much what I gave you. Just take the widths off #background1 and #content and they'll stretch the full width.

    To deal with the transparency of the top area (green in your picture) you'll need to add a corresponding transparent area to the top of the background image for #background1.

  19. #19
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I copied your code, but the two divs dosent meet in the middle of the sliderpic, it does in the picture you submitted, but not in code.
    Quote Originally Posted by TechnoBear View Post
    That seems to be pretty much what I gave you. Just take the widths off #background1 and #content and they'll stretch the full width.

    To deal with the transparency of the top area (green in your picture) you'll need to add a corresponding transparent area to the top of the background image for #background1.

  20. #20
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    OK, I think we have two problems here. The first is that you haven't entirely understood how my code works, perhaps because I haven't explained it very clearly. The second is that all through this thread, I've been guessing at what you want and what you're trying to achieve, because you haven't given me full information.

    In my code, there is an x and y repeating background image on <body>. (i.e. the image repeats horizontally and vertically.) Inside <body> is the div #background1, which also has an x and y repeating background image. This div has a min-height of 800px set. Nested inside this div is another, #content. It has a 400px high background image, which is set to repeat-x only. So no matter how tall the div gets, the background image will only ever cover the top 400px. The image (standing in for your slider) is centred over the join between the two backgrounds. If you're using different sizes of image/backgrounds, then you'll need to play about a bit to get things lined up, but the theory is simple enough.

    You added in another complication yesterday, when you mentioned that you wanted the body background to show through the top background (which is applied to #content). There are various ways to do this, depending on the kind of images you're using. If you're using a fixed-size, no-repeat image for the lower background portion (on #background1), then you can use background-position: 0px 400px; to position it below the other background. If you're using a repeating image, you'll need to construct it in such a way that it has a transparent area at the top, to lie underneath the top background. There may be other ways to do it, but as I don't know what else you're planning to put on the page, I'd be guessing again.

    Can you work out from that how to adjust my code to fit your images? I can't be of much more help just now, because
    but the two divs dosent meet in the middle of the sliderpic
    doesn't give me much clue as to what's actually happening.

  21. #21
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks man for taking your time to help me.

    I finally managed to make it somehow. I made the picture very high and repeated it to x. I managed to do it. Thanks :d

  22. #22
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    Good. Nice to know you got it sorted.


Bookmarks

Posting Permissions

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