Home/ Questions/Q 8764925
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:09:18+00:00

I want to stack one division on top of another each with different background.

  • 0

I want to stack one division on top of another each with different background. the background, ofcourse will be transparent (.png). This is to recreate an effect of a pattern on an image and avoid loading an entire 1366 x 768 image.

my html is somewhat like this

<body>
  <div id="firstLayer">
    <div id="secondLayer">
         <div id="mainContent">
          main page content 
         </div>
    </div>
  </div>
</body>

I have a radial gradient for the body, the #firstLayer contains the main logo, and the #secondLayer must consist the transparent pattern.

my first try at css was somewhat like this

#secondLayer{
    background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
}

But the pattern doesnt show up at all. How can i bring this #secondLayer on top of #firstLayer but just below the #mainContent?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to give width and height to #secondLayer like this Demo

    #secondLayer{
    background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
    width: 100%;
    height: 100%;
}
    • 0