No replies
kristy1802
Offline
newbie
Last seen: 9 years 32 weeks ago
Joined: 2011-02-08
Posts: 1
Points: 2

I just want to ask if the following is feasible..
i want to put multiple images in the background of the main container; and the middle piece has to be repeated in the y-axis if the height of the content increase.

i've been having trouble making so that when it repeats, it starts from that starting point of 401px.

can anyone help?

<head>
<style>
#main_container{position:relative; width:1050px; height:auto; min-height:500px; margin: -22px 0 0 0;}
#main_container.background {background:url(<a href="https://lh6.googleusercontent.com/_un7tkC01QLU/TVDALcNYtYI/AAAAAAAAIsQ/7Onw8QQMVtI/s512/background-01.jpg" rel="nofollow">https://lh6.googleusercontent.com/_un7tkC01QLU/TVDALcNYtYI/AAAAAAAAIsQ/7Onw8QQMVtI/s512/background-01.jpg</a>) no-repeat center top,
url(<a href="https://lh3.googleusercontent.com/_un7tkC01QLU/TVDALdNBaZI/AAAAAAAAIsM/lmQEDPvZlOU/s512/background-02.jpg" rel="nofollow">https://lh3.googleusercontent.com/_un7tkC01QLU/TVDALdNBaZI/AAAAAAAAIsM/lmQEDPvZlOU/s512/background-02.jpg</a>) no-repeat center 401px, /*need this to be repeat-y*/
url(<a href="https://lh5.googleusercontent.com/_un7tkC01QLU/TVDALdo3_HI/AAAAAAAAIsY/vQlpoPDjcMU/s512/background-03.jpg" rel="nofollow">https://lh5.googleusercontent.com/_un7tkC01QLU/TVDALdo3_HI/AAAAAAAAIsY/vQlpoPDjcMU/s512/background-03.jpg</a>) no-repeat center bottom;}
#content {width: 940px; height:auto; min-height:885px; position:absolute; margin:75px 0 0 130px;}
</style>
</head>
 
<body>
    <div id="main_container" class="background">
    	<div id="content">
        	Text goes here
        </div>
 
    </div>
 
</body>