Grow your CSS skills. Land your dream job.

How to Get Background Image to Load to Left

  • # June 13, 2010 at 9:20 pm

    Hi everyone, I am new to CSS and have just created a simple webpage using the tutorial at:
    http://css-tricks.com/perfect-full-page … und-image/

    It has worked wonderfully. Very simple to use. I have no css background and yet I was able to create.

    However, the image that I am using is centered on the page and covered by the text that scrolls.

    How do I load the photo to the left so that the image is not covered? Or should I have created an image that is to the left?

    Please advise. I have played around with the following code, changing centered to left. But all that does is move the image and throw up error code on the page.

    Any advise? Thanks.

    #bg div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
    }

    #bg td {
    text-align:center;
    vertical-align:middle;

    # June 14, 2010 at 5:41 pm

    Hi,
    I am new to css as well and usually come here to ask questions. However, I think I may know this one. Why don’t you try positioning with px? I have been through something similar. When I tried to position with % it would give me errors. Hope this helps somehow.
    Renan H. Coelho

    # June 14, 2010 at 6:28 pm

    Hi, thank you for responding. I have no idea what that is, but at least you tried to help. What I did end up doing: I changed the "white" page command to "peach," as I wanted it to match the graphic. It apparently did not recognize that name and just defaulted to transparent. So now the centered text is transparent and you can now see the entire graphic. This works.

    Take care.
    P

    "renanholanda" wrote:
    Hi,
    I am new to css as well and usually come here to ask questions. However, I think I may know this one. Why don’t you try positioning with px? I have been through something similar. When I tried to position with % it would give me errors. Hope this helps somehow.
    Renan H. Coelho
    # June 17, 2010 at 4:02 am

    You can position your background image using background-position: left, and background-repeat: no-repeat;

    # June 17, 2010 at 3:48 pm

    Hi, I tried that and yes, the photo moved, but random code showed up to the right of the page. :o

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".