I am using \[code\]column-count:2\[/code\] to add elements in a div vertically and hence arrange them horizontally. I have given the div a gradient background. I want it to move with the scroll (the background). The code I am using is:\[code\]<!DOCTYPE html><style>.prodLarge { margin-bottom:5px; margin-left:5px; width:200px; height:200px;}#dispTiles { position:absolute; top:10px; left:10px; bottom:10px; right:10px; margin:10px; overflow:auto; -moz-column-count:2; -webkit-column-count:2; column-count:2; padding:10px; background-image:linear-gradient(to left, #141414 0%, #323232 50%, #000000 100%); background-attachment:scroll;}</style><div id="pagecont"> <div id="dispTiles"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> <img class="prodLarge" src="http://microsoft.com/favicon.ico"> </div></div>\[/code\]The \[code\]background-attachment:scroll\[/code\] doesn't seem to be working as I want. Can anyone please assist? Also, will the solution work even if I use a background PNG image with repeat-x? And is there any better way to arrange div elements horizontally than setting \[code\]column:2\[/code\]?
Arrange div elements horizontally and make the background scroll
- Thread starter SarahC
- Start date