So i'm attempting to code something in HTML and CSS and i've run into a bit of a problem... I've got a background repeating in the css for "body {" but i also need another repeating background, but it has to start at the halfway point vertically on the screen. like this: ___________________ |                             | | body { background  | |__________________| |halfway                  | |repeating                | |__________________| the HTML&CSS i have at the moment is this: HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>TDD Designs</title> </head> <body> <div id="outer"> <div id="middle"> <div id="inner"> </div> </div> </div> </body> </html> Code (markup): css: body, html { height: 100%; background-image: url(images/background.jpg); background-repeat: repeat; } #outer {height: 100%; overflow: visible;} /* or without overflow */ #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static; } #test { background-image: url(images/background2.jpg); background-repeat: repeat; top: 50%; width: 100%; } #inner {position: relative; top: -50%} /* for explorer only */ /* optional: #inner[id] {position: static;} */ Code (markup): #test was my first try and it didn't work <_< So how would i do it, so that at 50% down the screen, it starts this new background that repeats to fit the bottom half of the screen no matter the resolution? thanks guys.
i dont think you can have 2 backgrounds on 1 stylesheet, maybe if you use to diffrent styles and used div tags or something that might work