Sun, 2014-09-28 14:10
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; }
Mon, 2014-09-29 07:59
#1
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
Mon, 2014-09-29 21:32
#2
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.