Grow your CSS skills. Land your dream job.

CSS static background/elements help

  • # April 20, 2009 at 9:59 am

    hi

    i have seen on many websites..
    that background is static does not scroll with the page..( like on twitter)
    and i have also seen that….. some elements on a site are static they do not move when the page is scrolled..

    how do we do it?

    # April 20, 2009 at 10:24 am

    ok i have dne it but cant understand one thing…

    style="background:#09151F url(images/air-plane.jpg) repeat-x fixed left top; "

    when i use this above tag it worked

    but when i used
    style="background-image:imageurl; position:fixed";
    then it didn’t worked for me ? why?

    image was shown but postiion was not taken

    and can u point me to a tutorial where i can learn css tags of following types
    style="background:#09151F url(images/air-plane.jpg) repeat-x fixed left top; "

    thanks in advance // i never knew of this fixed position.

    # April 20, 2009 at 10:38 am

    hi

    can u guys help me to fixed position image?
    because i tried above and it didnt worked for me…

    i want to create one image button on fixed position…thanks..
    and when it is mouse over… then i want to change this image size…..and add 2 more links…is it possible?

    # April 20, 2009 at 10:39 am

    Here’s a good place to start:
    http://www.w3schools.com/css/css_positioning.asp

    # April 20, 2009 at 1:14 pm
    "LEARNINGCSS" wrote:
    ok i have dne it but cant understand one thing…

    style="background:#09151F url(images/air-plane.jpg) repeat-x fixed left top; "

    when i use this above tag it worked

    but when i used
    style="background-image:imageurl; position:fixed";
    then it didn’t worked for me ? why?

    image was shown but postiion was not taken

    That is because in your first declaration, the "position" was being applied to the background. In your second declaration, the position was being applied to the element. Example:

    <div style="background:url no-repeat fixed top left;"> – this would make the background have no repeat, and be in a fixed position (top, left).

    The same thing can be done with:

    <div style="background:url; background-repeat:none; background-position:fixed top left;"> – note how all of the other declarations in there all apply to the background.

    Your second example:

    <div style="background:url; position:fixed;"> – this will not position the background as ‘fixed’. Instead, it will position the <div> as fixed.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".