Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Location
    Morocco
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS Image Clip property / Clipping 2 different images as background.

    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.

    Thank you in advance. Regards.

    <html>
    <head>
    <title></title>
    <style type="text/css">
    <link rel="stylesheet" href="style.css">
    <!--
    a { text-decoration: none}
    a:hover { color: #FF1111; text-decoration: none}
    -->
    </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>
    Es preferible morir de pie antes de vivir arrodilládo. CHE

  • #2
    umm
    umm is offline
    Regular Coder
    Join Date
    Sep 2002
    Location
    Antipodes
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Sep 2002
    Location
    Morocco
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still...

    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 . 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 ?
    Es preferible morir de pie antes de vivir arrodilládo. CHE

  • #4
    umm
    umm is offline
    Regular Coder
    Join Date
    Sep 2002
    Location
    Antipodes
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #5
    New to the CF scene
    Join Date
    Sep 2002
    Location
    Morocco
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Im afraid not. Clipping 2 images as fixed background anyone ?

    With all the brainmatter 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

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

    Regards.
    Es preferible morir de pie antes de vivir arrodilládo. CHE


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •