Grow your CSS skills. Land your dream job.

2 background images at the same time?

  • # August 11, 2008 at 1:30 pm

    I would like to put two background images on the page where they display at the same time. I have an image that is to stay at the top left corner of the page, and one that stays at the bottom right corner of the page. So far I can only do either one or the other.

    I’ve tried several different methods, but these don’t work. Here’s what I have so far:

    Code:
    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    }

    .back1
    {
    background:url(images/back.jpg);
    background-position: left top;
    background-repeat:no-repeat;
    }

    .back2
    {
    background:url(images/back2.jpg);
    background-position: right bottom;
    background-repeat:no-repeat;
    }

    Is this possible?

    # August 11, 2008 at 2:52 pm

    have you thought about maybe adding a table to the page. then split the cell into 2 and put the 2 images in the cells. I know that people say you should stay away from tables. But if you look at the internet now. Huge majior sites have tables all over them. they are still widely used. Now I think you should go with css wherever possible. but tables still have their uses.

    # August 11, 2008 at 3:22 pm

    Nevermind. I’m an idiot. I guess I didn’t play around with it enough. I just put both classes in separate div’s and it worked. Dunno what I was doing wrong before.

    HTML:

    Code:

    CSS:

    Code:
    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    }

    .back1
    {
    background:url(images/back1.jpg);
    background-position: left top;
    background-repeat:no-repeat;
    }

    .back2
    {
    background:url(images/back2.jpg);
    background-position: right bottom;
    background-repeat:no-repeat;
    }

    box
    # August 12, 2008 at 6:10 pm
    "cybershot" wrote:
    have you thought about maybe adding a table to the page. then split the cell into 2 and put the 2 images in the cells. I know that people say you should stay away from tables. But if you look at the internet now. Huge majior sites have tables all over them. they are still widely used. Now I think you should go with css wherever possible. but tables still have their uses.

    Do not use tables for layout – and it doesn’t matter if other sites do, no matter how big they might be – if they are using tables for layout they are poorly coded web sites and have poor accessibility. Tables are for tabular data only – only!

    Two background images may be achieved quite easily a number of ways – one might be applying a top left image to your html tag and a bottom right image to you body tag. Another would be to overlay divs with absolute positioning or utilising block level elements that naturally occur in your document – but whatever you do, do not use tables!

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

You must be logged in to reply to this topic.

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