Repeating background vertical image with top padding?

loamguy1 · 01-04-2013, 09: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, 09: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, 09:58 PM

Quote:

Originally Posted by sunfighter

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, 12: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 -

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, 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, 12: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, 04:42 PM

Quote:

Originally Posted by loamguy1

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, 01:41 AM

Quote:

Originally Posted by Excavator

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 -

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, 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, 03: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.

Code:

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, 07: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...

Code:

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