Multiple Background Images in One Div

One Background Image, Multiple Divs

Use the background-attachment attribute like in the following fiddle:

http://jsfiddle.net/1ovd3cnk/1/

each image block gets the following:

background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;

edit: was setting margin on row instead of conatiner

Multiple background images in one div, one image after the other

With the height of the div equal to the height of both background images, you can use bottom to move the second background image underneath the first.

Example

div {  background: url(http://www.placehold.it/5X100) repeat-x,   url(http://www.placehold.it/5X100/FF0000) bottom repeat-x;  height: 200px;}

<div></div>

one background image divided in multiple divs

Is this what you're looking for?

.split {    background-image: url(https://images.unsplash.com/photo-1568955773021-d347deaffa1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1289&q=80);    background-attachment: fixed;    width: 30%;    height: 300px;    margin: 0 10px 10px 0;    display: inline-block;    background-size: cover;      background-position: center;}
.container {    margin: 10px 0 0 10px;}

<div class="container">    <div class="row">        <div class="split"></div>        <div class="split"></div>        <div class="split"></div>    </div>    <div class="row">        <div class="split"></div>        <div class="split"></div>        <div class="split"></div>    </div></div>

Two background images, one with a percentage size and the other one cover what's left?

Use multiple background and some padding, background-origin trick. The idea is to define padding as half the width and put the image on the content-box which will be the other half.

You have to use vw unit but there is a small drawback as it consider the width of the scroll. It can also be an issue if the div is not meant to be a full width div.

.box {  padding-left:50vw;  height:300px;  background:    linear-gradient(red, yellow) left/50vw 100%,    url(http://placehold.it/400x400) center/cover content-box;  background-repeat:no-repeat;}  body {  margin:0;}

<div class="box"></div>

Can I have multiple background images using CSS?

CSS3 allows this sort of thing and it looks like this:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

Make two background images responsive alongside divs with CSS

theres a lot of error on your css. dont give fix width on your container if you want it to be responsive. ive edited your fiddle and came up with this: https://jsfiddle.net/kjyopdL8/4/

#seats:before {
    content: '';
    display: block;
    padding: 50%;
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
    background-image: url(http://i.imgur.com/qn56yss.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

take a look at the pseudo selector before. it did the trick!

One background image for multiple divs

I think the background-attachment property may do the trick for you.

See: http://www.w3.org/TR/CSS21/colors.html#background-properties

If you use background-attachment: fixed, the background image is fixed with
respect to the viewport. So, if you apply it to several elements, it is as if the background image is being viewed through "lenses" over the page.

If you page has a vertical scroll bar, then the background image will remain fixed as the content moves (this may not suit your design).

.bgdeco {  width: 700px;  height: 100px;  margin: 30px;  border: 1px solid yellow;  background-image: url(http://placekitten.com/2000/700);  background-attachment: fixed;  background-position: top center;}

<div class="bgdeco"></div><div class="bgdeco"></div><div class="bgdeco"></div>