Treehouse: Grow your CSS skills. Land your dream job.

Aligning Background Image

  • # January 30, 2011 at 4:30 pm

    Okay guys, I know I just keep coming at you with stuff… thanks for bearing with me.

    I’m trying to align these background images within my #main-content div.

    How do I go about that? Does it depend on the size of the PNG file?

    The transparency is fine, I just can’t get the image aligned to the top left.

    # January 30, 2011 at 4:31 pm

    In shorthand, I’m talking about those crazy star patterns behind the forms. This material is the intellectual property of Awake Media, but I’m coding it.

    # January 30, 2011 at 5:37 pm

    not sure how you trying to achieve that… in this case i would recommend using Nicolas Gallagher techniques:

    nice design btw.

    # February 1, 2011 at 6:01 pm

    Thanks SAiNT…

    I am having a rough time getting the Nicolas Gallagher techniques.

    Does anyone else have suggestions about how to add in a background .png over a container with a background?

    I’m pretty desperate.

    # February 2, 2011 at 4:17 pm

    i know, all those pseudo elements can be confusing :((
    but it’s really the easiest way…

    another technique is to define the background for head and body:

    in CSS3 you can define several backgrounds for ONE element, like this:

    url( images/aztec_block.png) 0 0 no-repeat,
    url(images/aztec_block.png) -576px 100% no-repeat,
    url(images/aztec_block.png) -288px 0 repeat-y;
    i’m not sure, but maybe you can make this work crossbrowser with Modernizer.

    if you having problems with aligning transparent backgrounds through CSS, you can always correct the image itself by adding transparent pixels from the side you need to push it to..

    here’s a layout i made recently:
    there’s a 4 backgrounds on each other :))

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

You must be logged in to reply to this topic.