...

View Full Version : Repeating background vertical image with top padding?



loamguy1
01-04-2013, 10:20 PM
I have a container 969px wide that should have left and right shadow images (each 27px wide for a total container width of 1023px).

My problem is that I don't want the shadows on the left and right to start until about 30pixels down from the top of the container.

My guess is that I need to create another container 30px down just for the shadows.

But I'm wondering if I could use the shadows on the entire container and add top padding to the shadow images, but not add top padding to the container itself? Is there a way to do this? I suspect there is and I'm making it harder, but I wanted to throw it out there for the masses.

Thanks!

sunfighter
01-04-2013, 10:56 PM
Why didn't you just try it? Without code I'm guessing, but yes using top padding OR top margin on the two shadows will force them to start further down than the container.

loamguy1
01-04-2013, 10:58 PM
Why didn't you just try it? Without code I'm guessing, but yes using top padding OR top margin on the two shadows will force them to start further down than the container.

I tried it and unfortunately it pushed down the container as well, not just the shadows. Perhaps setting up the other container is the only way?

Excavator
01-05-2013, 01:49 AM
Hello loamguy1,
If your shadow is an actual image that you using as a background you can easily position that. If your shadow is CSS created, neither margin or padding will move it down.

Look at it like this once -
<!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 {
margin: 0;
background: #fc6;
}
#outer-container {
width: 800px;
margin: 50px auto;
background: #ccc;
box-shadow: 0 0 20px #8493A6;
}
#inner-container {
height: 500px;
width: 760px;
margin: 0 0 0 -380px;
position: relative;
top: -20px;
left: 50%;
background: #fff;
}
</style>
</head>
<body>
<div id="outer-container">
<div id="inner-container">
<!--end inner-container--></div>
<!--end outer-container--></div>
</body>
</html>

webdevs
01-05-2013, 01:44 PM
You will not needs to be take 2 div. use this method.

#IDName {background-image: 50px center imgname here}

sunfighter
01-05-2013, 05:42 PM
I tried it and unfortunately it pushed down the container as well, not just the shadows. Perhaps setting up the other container is the only way?

If Excavator or webdevs methods do not fix your problem post the code please so we're not guessing.

loamguy1
01-07-2013, 02:41 AM
Hello loamguy1,
If your shadow is an actual image that you using as a background you can easily position that. If your shadow is CSS created, neither margin or padding will move it down.

Look at it like this once -
<!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 {
margin: 0;
background: #fc6;
}
#outer-container {
width: 800px;
margin: 50px auto;
background: #ccc;
box-shadow: 0 0 20px #8493A6;
}
#inner-container {
height: 500px;
width: 760px;
margin: 0 0 0 -380px;
position: relative;
top: -20px;
left: 50%;
background: #fff;
}
</style>
</head>
<body>
<div id="outer-container">
<div id="inner-container">
<!--end inner-container--></div>
<!--end outer-container--></div>
</body>
</html>

Ok, thanks for the info, excavator.

The shadow image is an actual png image, 27w x 5h.

Once I go back to work tomorrow I'm going to try this out and post some code if I'm still stuck (which is probably likely, lol).

loamguy1
01-07-2013, 04:03 PM
Code posted below:

Please note the "top" div is inside the "main-container" div which is inside the "shadow-container" divs.

And it is the "top" div I'd like to remove the shadow borders from.



body {
background: url(img/msw-site-bg-notopblack.jpg) no-repeat top center;
background-color:#fff;
background-attachment: fixed;
}

#shadow-container {
width:1023px;
margin: 0px auto 0;
background: transparent url(img/BackgroundShadow_right.png) repeat-y right top;
}

#shadow-border-left {
background: transparent url(img/BackgroundShadow_Left.png) repeat-y left top;
}

#main-container {
width:969px;
margin: 0px auto 0;
}

#top {
height:140px;
z-index:500;
position:fixed;
width:969px;
padding:0px;
top:0px;
background-image:none;
}

Excavator
01-07-2013, 08:12 PM
It's a lot easier if you post your entire code so we don't have to guess what you're doing with your markup. That CSS seems to work, with a few changes...


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {background: #fff url(img/msw-site-bg-notopblack.jpg) no-repeat fixed center top;}
#shadow-container {
width: 1022px;
margin: 0 auto;
background: url(img/BackgroundShadow_right.png) repeat-y right top;
}
#shadow-border-left {background: #0f0 url(img/BackgroundShadow_Left.png) repeat-y left top;}
#main-container {
width: 968px;
margin: 140px auto;
background: #ccc;
}
#top {
height: 140px;
width: 968px;
margin: 0 0 0 -484px;
position: fixed;
top: 0px;
left: 50%;
z-index: 1;
background: #f00;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="shadow-container">
<div id="shadow-border-left">
<div id="main-container">
<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 main-containner--></div>
<!--end shadow-border-left--></div>
<!--end shadow-container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum