Jump to content

Two repeating images


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...