WordPress.org

Forums

background images stacking? (4 posts)

  1. charismaarts
    Member
    Posted 2 years ago #

    this may be a stupid question so I am sorry if so. what i want to do is have a background image be at top and repeat across (repeat-x)

    that is easy to do; but now i want to have another background image be right below it and also repeat all the way across.

    is there any way to do this? I have seen lots of sites with background color down so far; and then another color down so far, and then another color and so on. Now I know this could be done by just making a tall pic that goes all they way down with all the different colors - and then just have it repeat across; but that seems a primitive way to do this;

    so I am wondering how people normally do this/

    thanks, gerard

  2. justingenious
    Member
    Posted 2 years ago #

    are both of them to just repeat-x?

  3. Jose Castaneda
    THEME COFFEE MONKEY
    Posted 2 years ago #

    That is done with CSS/HTML. It's how you would structure the markup. So, let's say we want three colors we would do something like:

    <div class="wide color-1">Color 1</div>
    <div class="wide color-3">Color 2</div>
    <div class="wide color-3">Color 3</div>

    That creates the bands. Next we style it with CSS:

    .wide {
      width: 100%;
      height: 300px;
    }
    
    .color-1 {
      background: url( './images/bg-1.jpg' ) repeat-x;
    }
    
    .color-2 {
      background: url( './images/bg-2.jpg' ) repeat-x;
    }
    
    .color-3 {
      background: url( './images/bg-3.jpg' ) repeat-x;
    }

    Hope that helps you understand how that works. :)

  4. i_g_wright
    Member
    Posted 2 years ago #

    Hi,

    You can actually do this with just one piece of CSS: (This only works for browsers that support CSS3 e.g. IE9+, Chrome, Safari, Firefox, Opera)

    Say you have 3 images:

    1.png (1x50px)
    2.png (1x50px)
    3.png (1x1px)

    You can then do stacking orders in CSS for the background property (similar to z-index). The below code will display:

    1.png from coordinates 0,0px & repeat-x.
    2.png from 0,50px & repeat-x

    Finally
    3.png from 0,0 & repeat both X&Y.

    body {
          background:
            url('1.png') 0 0 repeat-x,
            url('2.png') 0 50px repeat-x,
            url('3.png');
     }

    Hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.