Home/ Questions/Q 8723301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T07:35:55+00:00

Sometimes the body is smaller than the screen and the background get’s cropped. That’s

  • 0

Sometimes the body is smaller than the screen and the background get’s cropped. That’s why I want to put the two backgrounds in the <html> element. I know that with CSS3 it is possible to have one element with two backgrounds (one following the other), written like this:

background: url('/images/mosaic.gif') no-repeat, url('/images/photo.png') no-repeat;

My question is, is it possible to have 2 images on top of each other? A mosaic repeated and above it a photo no-repeat. I’ve tried to do it this way, which doesn’t work:

background: url('/images/mosaic.gif') repeat, url('/images/photo.png') no-repeat;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, it’s possible, and exactly the way you wrote. See here for an illustration.

    <div id='cont'></div>​

#cont { 
    background: url(http://lorempixel.com/400/200/food/1/) center center no-repeat,
        url(http://lorempixel.com/400/200/food/2/) repeat; 
}
    • 0