background images stacking?

  • charismaarts

    (@charismaarts)


    10 years, 10 months 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

Viewing 3 replies - 1 through 3 (of 3 total)
  • justingenious

    (@justingenious)

    10 years, 10 months ago

    are both of them to just repeat-x?

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    10 years, 10 months 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. 🙂

    i_g_wright

    (@i_g_wright)

    10 years, 10 months 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘background images stacking?’ is closed to new replies.