CSS - Using One Background Image with Multiple Images on It

CSS - using one background image with multiple images on it

The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.

If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.

How to control multiple images for a single background definition

I think you were almost there using CSS I believe that you can do it as follows:

   .my-class {
      background:
        url('overlay.png') no-repeat center, 
        url('base.png') no-repeat center;
      background-size: 90px 80px, 100px 100px;
    }

You just need the comma and then set the size of the second background.

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>

CSS - Multiple images in one and using CSS to determine a background

{
    height: foo;
    width: foo;
    overflow: hidden;
    background: colour url() no-repeat 0 pixels-to-top-of-image;
}

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;
}

One big background image or multiple small images?

Use separate images.

Here are a few reasons why:

Maintenance:
It's going to be much easier to maintain in the future, if/when there comes a point when you want to build on what you already have. Furthermore (and subjectively), the background image is not critical to the design. It wouldn't look broken if parts of the background were clipped. It would look broken however, if the logo were distorted.

Bear in mind also that newer, sharper displays are being developed. It's much easier to display the standard resolution background (it's already blurry, so clarity is not essential), and maintain two versions of the logo. One for standard displays, one for HD.

Semantics: What if the user has images disabled? Sure, it's unlikely, but what about Google? You should have some proper markup with real content. Your site needs real textual content in order for Google's crawlers to gather information about it. Use CSS image-replacement techniques to build the interface.

Another note on HD displays:
It's convention to serve larger images to HD (retina) displays, and use CSS to downsize them, effectively increasing their dots-per-inch. If you use just one image, the user will have to download a considerably large image. More bandwidth used by you, and slower experience for your users.

Furthermore, the text will look horrible on HD displays. It makes much more sense to allow the browser to render razor-sharp text to the user.

Accessibility: For a start, screen readers won't have a clue what your site is about. That might not be so relevant in this case, but it's best practice to build and accessible website. If you want to include some smaller text on the site, some users may be unable to read it. Normally they would increase the font-size, but if you use images, they're powerless.

I may have over-dramatised this answer, but the advice is well-intentioned.

Multiple background images - Can't bring image to the front

You are using the background-image property to modify the the background-position/background-repeat properties. Using the background shorthand property (not background-image), you could use something like this:

background: url("..") no-repeat 3%, 50%;

Which is essentially just:

background-image: url("..);
background-repeat:no-repeat;
background-position:3%, 50%;

Now, according to the spec - for multiple backgrounds the syntax is as follows:

[ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> 
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

Therefore, you would use the following:

WORKING EXAMPLE HERE

background: url("//placehold.it/100") no-repeat 3%, 50%,
           -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aa2329), color-stop(100%, #bb4d50)),
           -webkit-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
           -moz-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            -o-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            linear-gradient(#aa2329, #bb4d50);

CSS - Using One Background Image with Multiple Images on It