CODEWITHSUNDEEP
htmlcss
Endô Fujimoto
Endô Fujimoto

Reputation: 311

Creating Different CSS Layers

Hello I am new to css and am in need of some assistance. I am wanting to create 3 layers in CSS for my website so it looks like the picture I have provided below.

Picture Provided

How would I go about setting this up in CSS? Any help would be much appreciated.

Thankyou.

Upvotes: 0

Views: 220

Answers (2)

Dee
Dee

Reputation: 714

All you have to do is add the background img of the pattern to the css here's an example of the code 

div {
background: url(../images/purpalt.png) repeat; 
}

[http://www.bootply.com/4iBwk4Tmfr][1]

/* CSS used here will be applied after bootstrap.css */

/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
  background: #666;
}

.jumbotron {
    background: black;
  height: 553px;

  }

.container {
    background: #ccc;
    padding: 15px 10px;
    height: 553px;
    width: 960px;
  }

  .image-box {
    background: #fff;
      text-align: center;
      height: 500px;
    }

  footer {
      background: orange;
      height: 190px;


<div class="container-full">

      <div class="jumbotron">

      </div>

  <div class="container">
    <div class="col-md-12">
      <div class="image-box">
    Image to go here

      </div>
    </div>


  </div>    


</div> <!-- /container full -->
<footer></footer>

Upvotes: 1

Shan Robertson
Shan Robertson

Reputation: 2742

You want to learn about the z-index property. But basically, anything you apply z-index to needs to have a position set... I'm pretty sure static doesn't work but absolute relative & fixed all do it. then you can just order them. For example:

.div-background{
  z-index:1;
  position:relative;
}
.div-middle{
  z-index:2;
  position:relative;
}
.div-front{
  z-index:3;
  position:relative;
}

Make sense?

Upvotes: 3

Related Questions