Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Repeating background vertical image with top padding?

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,602
    Thanks
    24
    Thanked 647 Times in 646 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    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?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    You will not needs to be take 2 div. use this method.

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

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,602
    Thanks
    24
    Thanked 647 Times in 646 Posts
    Quote Originally Posted by loamguy1 View Post
    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.

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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).

  • #8
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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;
    }

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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