Brigog Posted May 21, 2010 Share Posted May 21, 2010 Hey guys, I am no CSS pro and im working on a website for a friend. What I am looking to do is have two narrow images be repeated left and right of my header. A great example of what I am looking for is www.cib-guild.com . If you look at the sides of the main body you will see scan lines running at a 45 deg angel going opposite ways on each side of the page. Well the website I am working on has something similar were the sides differ from left to right. So I need to know, how do I tell one to repeat left and one to repeat right of the main area of the site? The reason I am doing this is for people with larger resolutions so that there isnt just a solid color on the sides. Please let me know and keep in mind im fairly new to CSS. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 21, 2010 Share Posted May 21, 2010 all i see is 1600 x 2000 image repeated across the screen only, with grid lines running diagonally in one direction only.the only way i can see this working, is have image with lines running in opposite directions from centre, and the width should be the length of the highest width resolution, you would like to cover, or blend the grid lines into the background at a set distance from edge, and then repeat this image down the screen. Link to comment Share on other sites More sharing options...
mgason Posted May 21, 2010 Share Posted May 21, 2010 This sort of works but has problems.1 you must set an absolute height percent will not work unfortunately.2 when the browser is resized the seam between the backgrounds slides in and out of alignmentmaybe it will help you get on the right path to a solution that works for you anywayI made a pair of background images with lines as you mention 45 degrees going down to the left and down to the rightleftBg.jpg and rightNg.jpgThe absolute positioning is required so that z-index is allowed. That is then used to make sure they are always behind everything else <!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title></head><style type="text/css">#leftBg, #rightBg { width:50%; height:500px; margin:0; padding:0; }#leftBg{ float:left; background-image:url('leftBg.jpg'); position:absolute; left:0px; top:0px; z-index:-1;}#rightBg{ float:left; background-image:url('rightBg.jpg'); position:absolute; left:50%; top:0px; z-index:-1; }</style><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><div id = "leftBg"></div><div id = "rightBg"></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.