Grow your CSS skills. Land your dream job.

Multiple background images in exact pixel locations?

  • # January 9, 2013 at 11:04 am

    Morning, I’m positioning a bunch of things with fixed position. Originally I just used empty “b”s. But instead I want to use multiple backgrounds on the body. However only telling the images to be certain percentages or pixels from the top left is not an option. I need to also tell them to be X amounts from the bottom right. Anyway to do this that has not occurred to me?

    # January 9, 2013 at 11:08 am

    I may be misunderstanding your question, but you could just use `bottom: XXpx;` and `right: XXpx;`

    # January 9, 2013 at 11:12 am

    No your not I’m just stupid today apparently. So shorthand i say url(img.png) bottom Xpx right Xpx fixed no-repeat; ? That’s not right. Have to say it long hand?

    # January 9, 2013 at 11:28 am

    Like here is the only solution I have found. Not for me http://www.maratz.com/blog/archives/2008/08/23/how-to-offset-background-from-the-right-or-bottom/

    # January 9, 2013 at 11:51 am

    More info here http://code.google.com/p/chromium/issues/detail?id=95085

    # January 9, 2013 at 12:29 pm

    So css3 gives this background-position: bottom 10px right 20px;

    I guess I’ll test it and see who supports it because I can’t find and answer online

    # January 9, 2013 at 4:25 pm

    body {
    background:url(img/sun.png) top -15px left -15px, url(img/cloud1.png) right 550px top 250px, url(img/balloon1.png) bottom 200px left 50px, url(img/balloon2.png) bottom 400px right 150px;
    }

    only opera and fx support it

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

You must be logged in to reply to this topic.

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