X marks the spot (clever backgrounds)

Hi all,

I have and old treasure map graphic i would like to use as a background.

I am unsure on how to get the edging of the graphic to stick to the viewport edges while allowing the background to adjust according to the viewers browser.(graphic is just a texture and has no focal point)

any idea on the most straight forward way of tackling this?

You can’t do this with current CSS2 as a true background image, though CSS3 will offer this feature (which works in a few browsers now). You could put the image in the HTML and set it to width: 100%; but that won’t look good in some browsers, and it can get a bit messy, too. Another option is to use JavaScript, with something like Supersized.

The first thing that I can think of is to use multiple backgrounds or background divs to make the borders.

There was a recent article on how to do this.

Basically what you’d do is slice the image up so that only the main middle texture is your body {background-image:url(‘etc.jpg’);}. Then, with the four sides around, you can use them as alternate background images and repeat-x and repeat-y (for whatever works) so that they look nice.

Like so (CSS):


 background-repeat:repeat-y; /*You want it up and down because it's the left side border*/


Get it?


great link! thanks for the advice TehYoyo

No probs.

Happy to help.


sooo thought i had it i have the background image done.

it seems that my divs wont layer over the top of the edge of my background?

any ideas??

You need to tell us what method you are using, or better, provide a link so we can see what you are doing. Did you see my post above? It has a link to a method which you can basically cut and paste. Has content overlaid on image.

this is what i have

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<link rel=“stylesheet” href=“style.css” type=“text/css” media=“all” />


<div class=“cont”>
<div class=“back”>
<div class=“left”>
<div class=“right”>

<table width=“200” border=“1” cellpadding=“5”>
<td> </td>


background-position: top , left , right;

background:url(Images/sl.png) repeat-y;
background-position:top left;
background:url(Images/sr.png) repeat-y;
background-position: top right;

yes i got your like its very nifty though i dont get how to apply a slideshow to my issue?