X marks the spot (clever backgrounds)

HTML & CSS
1

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?

2

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.

3

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):


body
{
 background-image:url('maintexture.jpg');
}

#Leftbackgroundimageborder
{
 background-image:url('leftborder.jpg');
 background-repeat:repeat-y; /*You want it up and down because it's the left side border*/
}

#topbackgroundimageborder
{
 background-image:url('rightborder.jpg');
 background-repeat:repeat-x;
}

Get it?

~TehYoyo

4

great link! thanks for the advice TehYoyo

5

No probs.

Happy to help.

~TehYoyo

6

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??

7

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.

8

this is what i have

<head>
<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” />

</head>

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

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

</div>
</div>
</div>
</div>
</body>
</html>

.back
{
background-image:url(Images/back.png),url(Images/sl.png),url(Images/sr.png);
background-position: top , left , right;
}

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

9

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