Web Design Forums

tru · 24-03-2008, 17:50

Hey everyone

,
I have a problem to solve (that's why I'm here). You might want to take a look:
www_kamil.vdl.pl/pred/
The problem is that I want:
1) to make some bloody edge on the right as it's on the left
2) put background image to the center
The left bloody edge is made:

Code:

body { background: url(...) repeat-y left top; }

I have already tried making a div with bloody right edge but it wasn't equal 100% of window height.

Any ideas?

sry 4 my english, hope you understand whats going on

cssmonkey · 24-03-2008, 19:08

Hi, you had the right idea about adding another div for the right-hand image you just need to make your new div stretch the height of your body.

For your body tag add height:100%;
and then do the same for your right-hand background div. Hopefully that should fix it.

tru · 25-03-2008, 04:42

Thanks for your reply!
May I show you code:

Code:

<body>
   <div id="bg">
        <div id="wrap">
        <!-- content -->
        </div>
  </div>
</body>

CSS:

Code:

body {
background: #000000 url('./images/blood-left.png') repeat-y left top;
margin:0;
height:100%;
}
#bg{
background: url('./images/blood-right.png') repeat-y right top;
height:100%;
}
#wrap{
width:660px;
margin:0 auto 10px;
}

Now the right edge appears, however - what's weird - it adjust it's height to id wrap...

Here's image:
kamil.vdl.pl/upload/images/5310Snap1.jpg

cssmonkey · 25-03-2008, 09:04

Hi sorry I was doing this off the top of my head. I did a quick test in firefox and IE6 + IE7, the following should work:

Code:

html {
height:100%;
}
body {
background: #000000 url('./images/blood-left.png') repeat-y left top;
margin:0;
height:100%;
}
#bg{
background: url('./images/blood-right.png') repeat-y right top;
height:100%;
}
#wrap{
width:660px;
margin:0 auto 10px;
}

Basically you need to tell the html tag to stretch the height of the browser and then do the same for any child elements that require to be the full height.

tru · 25-03-2008, 11:35

Cheers mate

THANKS!!!

24-03-2008, 17:50	#1 (permalink)
tru Registered User Join Date: Mar 2008 Posts: 4	Other way to multiple backgrounds? Hey everyone , I have a problem to solve (that's why I'm here). You might want to take a look: www_kamil.vdl.pl/pred/ The problem is that I want: 1) to make some bloody edge on the right as it's on the left 2) put background image to the center The left bloody edge is made: Code: body { background: url(...) repeat-y left top; } I have already tried making a div with bloody right edge but it wasn't equal 100% of window height. Any ideas? sry 4 my english, hope you understand whats going on

25-03-2008, 09:04	#4 (permalink)
cssmonkey Registered User Join Date: Feb 2007 Location: Glasgow, Scotland Posts: 6	Hi sorry I was doing this off the top of my head. I did a quick test in firefox and IE6 + IE7, the following should work: Code: html { height:100%; } body { background: #000000 url('./images/blood-left.png') repeat-y left top; margin:0; height:100%; } #bg{ background: url('./images/blood-right.png') repeat-y right top; height:100%; } #wrap{ width:660px; margin:0 auto 10px; } Basically you need to tell the html tag to stretch the height of the browser and then do the same for any child elements that require to be the full height.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

24-03-2008, 19:08	#2 (permalink)
cssmonkey Registered User Join Date: Feb 2007 Location: Glasgow, Scotland Posts: 6	Hi, you had the right idea about adding another div for the right-hand image you just need to make your new div stretch the height of your body. For your body tag add height:100%; and then do the same for your right-hand background div. Hopefully that should fix it.

25-03-2008, 11:35	#5 (permalink)
tru Registered User Join Date: Mar 2008 Posts: 4	Cheers mate THANKS!!!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)