Results 1 to 2 of 2

Thread: Css background repeat x

  1. #1
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Css background repeat x

    hi, There is something is not clear myself how i can write code in css.

    I have first yellow background image with nice big font forground on the top of background image, the background wide size is 600 px, so now I want to put same yellow background images next to the first yellow background image with out and text font and repeat-x. that way show one wide 100% yellow image background.

    I'm trying to figuer out how to write that code to use repeat-x for the second one next to the first background image.

    .background {
    background-image: url(../images/CSSYellowBackground.png);
    background-repeat: repeat-x;

    }
    .image-background-text{
    background-image: url(../images/INTheNameOFUSA.png);
    background-repeat: no-repeat;
    }

    please help thanks.

    alidad

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    I have first yellow background image with nice big font forground on the top of background image, the background wide size is 600 px, so now I want to put same yellow background images next to the first yellow background image with out and text font and repeat-x. that way show one wide 100% yellow image background
    your explanation is difficult to understand. to me it reads you want to put two background images on the same element, which isnt possible. however in the code that you posted it appears you have two different classes.

    I'm trying to figuer out how to write that code to use repeat-x for the second one next to the first background image.
    background images are applied to the element that the are assigned to, if you want to have two background images next to each other, make your two elements side by side.


    .background {
    background-image: url(../images/CSSYellowBackground.png);
    background-repeat: repeat-x;

    }
    .image-background-text{
    background-image: url(../images/INTheNameOFUSA.png);
    background-repeat: no-repeat;
    }
    png file types are generally large and very hi-res files. When used on a class like you are using these two, it is telling me that you are using this element multiple times, and thus alot of bandwidth. jpg and gif formats are much preferred for web images, especially a background-image.

    also when you are posting code could you please use [code][/code] tags. they are formatted differently and its generally easier to read by those that try to help out here.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •