CSS - Overlay background images?

mostly useless

I'm sure I read how to do this on Glorious Trainwrecks, but I can't find it now and I can't seem to get the syntax right. I'm using Sugarcane with imported images. Thanks!

Erik Temple

It's not clear to me what you're trying to do...?

mostly useless

Sorry, should have been more clear. I would like to use a large, screen filling background image and layer a smaller image over it.

Erik Temple

Hope you don't mind a "teach a man to fish" answer. Here are instructions for multiple ways to do a full background image:

http://css-tricks.com/perfect-full-page-background-image/

If you're willing to forego support for older browsers, you can overlay your image using CSS3 multiple backgrounds (supported browsers). Here's a note on the syntax for that:

http://caniuse.com/#search=multiple backgrounds

mostly useless

Best kind of answer, Erik! I have already tried the below:

body {
  background-image: [img[image1]], [img[image2]];
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center center;
}

But I only see the first image specified.

mth

Which image is supposed to be the front one? This example lists the background layers from front to back. So unless image1 is smaller or transparent, image2 will be hiding behind it.

mostly useless

Aha! Well, I figured it out. It doesn't work with imported images (or imported images require a different syntax). So my above code fails as described, but this works fine:

body {
  background-image: url('small.jpg'), url('large.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center center;
}

L

mostly wrote:

Aha! Well, I figured it out. It doesn't work with imported images (or imported images require a different syntax)

Are you sure? This bug should have been fixed in 1.4.1.

Sharpe

L wrote:

mostly wrote:

Aha! Well, I figured it out. It doesn't work with imported images (or imported images require a different syntax)

Are you sure? This bug should have been fixed in 1.4.1.

body {
background: [img[bg]] no-repeat center center fixed;
background-size: cover;
}

Works in 1.4.1.

mostly useless

Sorry all! I could have sworn I'd updated to 1.4.1, but apparently not. Thanks!

naimerkallis

try this image overlay

.imgBox
{
width: 191px;
height: 191px;
background: url(duck.png) no-repeat;
}
.imgBox:hover {
width: 191px;
height: 191px;
background: url(peng.png) no-repeat;
}

More about overlay...

http://www.corelangs.com/css/box/hover.html

naimer

jiqexoo

You can use multiple image in modern browsers almost the same way as it works with single background image, you need to use the same background property to specify backgrounds which must be separated by commas, like here: multiple backgrounds using CSS3. The images will overlap each other in the order which you set them (list separated by commas).