Having multiple background using divs

HTML & CSS
1

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:

<!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:

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

If you want multiple backgrounds like that, the trick is to nest divs within divs. Your andrabg div is outside the slider div.

3

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?

4

Sorry, it’s not really clear. Could you post an image of what you actually want, or put this up live somewhere?

5

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

I gona tell you, since I cant post live now. :confused:

#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, :stuck_out_tongue: )

body {

7

If you dont understand, I just want two different background splitted in halfway of the screen. thats basically it.

8

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

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.

10

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

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.

12

I hope you don’t get angry because I don’t understand. I would be sooo glad if you could help me.

13

No, of course I’m not angry. I was very tired last night and probably not explaining myself very well. :slight_smile: I think you’re trying to achieve something like this:

The code for that is very simple:

<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>

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

Thanks for your answer. :slight_smile:

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.

15

You mean like this?

<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>

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

Ill come back with a picture describing exactly how I want it in some hours. :smiley:

17

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.

1920×1080 166 KB

18

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

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.

20

[FONT=Verdana]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. :slight_smile: 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. :slight_smile:

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. :slight_smile:

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. :)[/FONT]