CSS Image Clip property / Clipping 2 different images as background. [Archive]

View Full Version : CSS Image Clip property / Clipping 2 different images as background.

E |A| E

09-08-2002, 12:43 AM

Hello, as you can see from the code below I have two images , each is displayed a side of the page. How can I make those images fixed while the rest of the content scrolls ?

I know of the

BODY {background-image:url(images/leftpanel.jpg); background-repeat:repeat-y}

But this will let me clip only one picture and I need to clip one on each side. And its not really what I need since it repeats the same image that I want fixed.

Sorry to bug you with this minor issue but I just spent 18 hours in front of the puter and I need some help. :confused:

Thank you in advance. Regards.

<html>
<head>
<title></title>
<style type="text/css">
<link rel="stylesheet" href="style.css">

</style>
</head>
<body link="#CC0000" vlink="#CC0000" alink="#FF0000" onLoad="if (self != top) top.location = self.location" topmargin="0" leftmargin="0">
[COLOR=orangered]
// image 1
<span style="position: rel; left: 0; top: 0; z-index: -3"><img border="0" src="image1.jpg" align="left" width="135" height="600"></span>
// image 2
<span style="z-index: -3; position: rel; right: 0; top: 0"><img border="0" src="image2.jpg" align="right" width="135" height="600"></span>
</body>
</html>

umm

09-08-2002, 02:39 AM

I'm not sure you can get what you want without some javascripting (I may be wrong of course).

Anyway, to put one image in the document body so that the other content scrolls over it, do this:

<style type="text/css">
body {
background-image: url(images/some_image.gif);
background-repeat: no-repeat;
background-position: left center;
background-attachment: fixed;
}
</style>

hth

E |A| E

09-08-2002, 11:20 AM

Thanks for your reply, I know of the body property, its still one image, I need an image clipped on each side of the page, thats two images

The current design can be viewed here Door (http://www.nabil.salemedia.net.ma/eaedoor.html) . This is really important for me as it is the design I intend to implement on all pages, providing that I can make them fix and the rest of the content scrollable. Clipping 2 images as background anyone ? :confused:

umm

09-08-2002, 08:30 PM

make one large image (not to large) and paste one image on either and then position it in the background using css in the body (until you find a better solution).

E |A| E

09-09-2002, 10:45 AM

With all the brainmatter :cool: concentrated here someone should be able to come up with a solution to this problem. 2 The newcomers on this thread, heres the page so you can see what I want to do.
E | A | E (http://nabil.salemedia.net.ma/)

PS note to css knowledgeable folks around: dont let me hanging if this is feasable, how , if its not, its not. :D

Regards.