2 replies [Last post]
ooleyguy
ooleyguy's picture
Offline
newbie
USA
Last seen: 5 years 35 weeks ago
USA
Timezone: GMT-4
Joined: 2014-09-28
Posts: 2
Points: 3

A while back, I saw a great method to get semi-transparent backgrounds of differing sizes to work together to make an interesting effect when re-sizing the window. It works by having a body background, and two divs with their own semi-transparent backgrounds that are above the body background. However, no matter what I do, the backgrounds of the divs only fill the original window size. When you scroll down, the only background that remains is the body background.

My code is thus:

HTML Code

<!DOCTYPE HTML>
 
<html>
 
<head>
	<title>Ooleytech</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link href="_css/layout.css" rel="stylesheet" type="text/css" media="screen" />
	<link href="_css/reset.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="_css/global.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 
<body>
 
<div id="foreground"> <!-- ~=~ DIV#1 FOREGROUND EFFECTS BEGINS ~=~ -->
<div id="midground"> <!-- ~=~ DIV#2 MIDGROUND EFFECTS BEGINS ~=~ -->
 
<div id="pageWrapper"> <!-- ~=~ DIV#3 MAIN PAGE WRAPPER BEGINS (85% wide) ~=~ -->
 
	<header> <!-- ~=~ HEADER BEGINS ~=~ -->
 
        <h1>Header</h1>
 
		<nav> <!-- ~=~ NAVBAR ~=~ -->
 
			<ul>
				<li><a href="nav1.htm" title="Nav 1">Navigation 1</a></li>
				<li><a href="nav2.htm" title="Nav 2">Navigation 2</a></li>
				<li><a href="nav3.htm" title="Nav 3">Navigation 3</a></li>
				<li><a href="nav4.htm" title="Nav 4">Navigation 4</a></li>
				<li><a href="nav5.htm" title="Nav 5">Navigation 5</a></li>
				<li><a href="nav6.com" title="Nav 6">Navigation 6</a></li>
			</ul>
 
		</nav>
 
	</header> <!-- ~=~ HEADER ENDS ~=~ -->
 
	<div id="sidebarColor"> <!-- ~=~ DIV#4 DEFINE SIDEBAR COLOR (with CSS, this becomes the bg color/image of the sidebar) ~=~ -->
 
		<div id="contentColumnColor"> <!-- ~=~ DIV#5 DEFINE MAIN COLUMN COLOR (with CSS, this becomes the bg color/image of the main column) ~=~ -->
 
			<div id="columnHeightEqualizer"> <!-- ~=~ DIV#6 HEIGHT EQUALIZER (This div causes all columns to appear equal height ~=~ -->
 
				<section id="mainContentColumn"> <!-- ~=~ SECTION COLUMN BEGINS ~=~ -->
 
                	<h1>Main Content</h1>
 
                	<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
 
                	<p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
                    et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
                    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
                    modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
                    laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
                    vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p>
 
                    <p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
                    excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                    rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
                    possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
                    voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
                    consequatur aut perferendis doloribus asperiores repellat. </p>
 
				</section> <!-- ~=~ ARTICLE COLUMN ENDS ~=~ -->
 
        	</div> <!-- ~=~ DIV#6 HEIGHT EQUALIZER END ~=~ -->
 
			<aside id="sidebarContentColumn"> <!-- ~=~ ASIDE COLUMN BEGINS ~=~ -->
 
            	<h1>Sidebar</h1>
 
				<p> Lorem ipsum dolor sit amet,</p>
				<p>consectetur adipiscing elit, </p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua. </p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum</p>
				<p>consectetur adipiscing elit,</p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua.</p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum.</p>
				<p> Lorem ipsum dolor sit amet,</p>
				<p>consectetur adipiscing elit, </p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua. </p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum</p>
				<p>consectetur adipiscing elit,</p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua.</p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum.</p>
				<p> Lorem ipsum dolor sit amet,</p>
				<p>consectetur adipiscing elit, </p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua. </p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum</p>
				<p>consectetur adipiscing elit,</p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua.</p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum.</p>
				<p> Lorem ipsum dolor sit amet,</p>
				<p>consectetur adipiscing elit, </p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua. </p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum</p>
				<p>consectetur adipiscing elit,</p>
				<p>sed do eiusmod tempor incididunt</p>
				<p>ut labore et dolore magna aliqua.</p>
				<p>Ut enim ad minim veniam, quis nostrud</p>
				<p>exercitation ullamco laboris nisi</p>
				<p>ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in</p>
				<p>reprehenderit in voluptate</p>
				<p>velit esse cillum dolore eu</p>
				<p>fugiat nulla pariatur. Excepteur</p>
				<p>sint occaecat cupidatat non</p>
				<p>proident, sunt in culpa qui</p>
				<p>officia deserunt mollit anim</p>
				<p>id est laborum.</p>
 
			</aside> <!-- ~=~ ASIDE COLUMN ENDS ~=~ -->
 
		</div> <!-- ~=~ DIV#5 DEFINE MAIN COLUMN COLOR ENDS ~=~ -->
 
	</div> <!-- ~=~ DIV#4 DEFINE SIDEBAR COLOR ENDS ~=~ -->
 
	<footer> <!-- ~=~ FOOTER BEGINS ~=~ -->
 
    	<h1>Footer</h1>
 
	</footer> <!-- ~=~ FOOTER ENDS ~=~ -->
 
</div> <!-- ~=~ DIV#3 MAIN PAGE WRAPPER ENDS  ~=~ -->
 
<!-- ~=~ JavaScript includes begin ~=~  -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- ~=~  JavaScript includes end ~=~  -->
 
</div><!-- ~=~ DIV#2 MIDGROUND EFFECTS END  ~=~ -->
</div><!-- ~=~ DIV#1 FOREGROUND EFFECTS END  ~=~ -->
</body>
 
</html>

CSS Code

body {
	background: url(../_images/other/backstars.png);
}
 
#midground {
	background: url(../_images/other/midstars.png) repeat 38% 20%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
 
#foreground {
	background: url(../_images/other/forestars.png) repeat 90% 110%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
 
#sidebarColor {
	color: #CCC;
}
 
#contentColumnColor {
	color: #CCC;
}
 
header {
	color: #CCC;
}
 
 
nav {
	color: #CCC;
}
 
footer {
	color: #CCC;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 21 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This may miss your point, but

This may miss your point, but have you looked at the background-size property?

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ooleyguy
ooleyguy's picture
Offline
newbie
USA
Last seen: 5 years 35 weeks ago
USA
Timezone: GMT-4
Joined: 2014-09-28
Posts: 2
Points: 3

Thanks for the reply, but

Thanks for the reply, but that doesn't do it. That just increases or decreases the size of the image that I am using to tile across the div. I need something that will cause the tiling to continue in the div past the original viewport size. The problem is that (seemingly) no matter what I do, the background stars only tile until the original viewport, but if the size of the page causes the need for scrolling, the bg images do not continue to tile beyond the original viewport. Either there is some conflict causing this or it cannot be done with pure CSS.

Thank you.