dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Background image positioning

  1. #1
    Join Date
    Mar 2003
    Location
    England
    Posts
    4

    Question Background image positioning

    Hello

    Im kinda new to CSS, and i got a pretty good understanding of it all, but I have a question.

    I can make my tiled background go all the way down the page (repeat y etc), but i wanted to position it so it always falls down the right hand side of the browser window regardless of resolution and window size.

    Is this possible?? Ive only seen position work on left and top coordinates.

    Thanks guys.
    Mike

  2. #2
    Join Date
    Mar 2003
    Location
    England
    Posts
    4
    Dont worry think i have figured it out, i used background-position: right

    thanks anyway

  3. #3
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    If I understand you correctly, you wish to have a continuously repeating image down the right hand side of the browser.

    Just changing your position to right top should work (I would have thought you'd tried that seeing as you said you had tried left top ).

    <style type="text/css" media="screen">
    body {
    background-image: url(image.gif);
    background-position: right top;
    background-repeat: repeat-y;
    }
    </style>

    Sorry if i've misunderstood.

    Paul

  4. #4
    Join Date
    Mar 2003
    Location
    England
    Posts
    4
    Hi Paul

    cheers for the reply- i already tried that it worked!!

    When i said about left and top, the way I understood it to work was in CSS you could only define an element to be a certain number of pixels from the left and/or from the top ie position: absolute; left 20px; top 2px; or whatever it is. But yes I understand now how to put an element down the right.

    So am i right in thinking I could position something 25 pixels from the right? maybe doing right -25px ?

  5. #5
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    You can't use keywords such as right, top etc in conjunction with px or % when using background-position.

    However you can position the background using :

    background-position: 50px 100px;

    This will define the offset of the top left corner of the origin image from the top left corner of the background. The first value is the horizontal axis and the second value is the vertical axis.

    To position an image from the right hand border you would need to use percentages. You may have to use trial and error to get it exactly where you want, but a position of 50% 50% will position the middle of the image with the middle of the background. So as I understand it a position of 95% 0% should position a point at 95% of the image with a point at 95% of the background. (Percent causes the appropriate point within the origin image to be aligned with the appropriate point in the background element).

    e.g.
    background-position: 95% 0%;

    (Note Navigator 4.x doesn't support the background-position at all)

    Hope tha makes sense.

    Paul

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles