CODEWITHSUNDEEP
csswordpress
ScemuFessa
ScemuFessa

Reputation: 47

How to present body background image above content

i am working on this website (builted with Wordpress) and i am trying to set this image as a fixed left background above the entire website content.

Via CSS i'm trying this

body { 
background-image: url("http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png"); 
background-position: left; 
background-repeat: no-repeat; 
z-index: 1; 
}

...but the z-index does not works.

Any tip?

Thanks in advice.

Upvotes: 3

Views: 3578

Answers (1)

user3722860
user3722860

Reputation: 189

Inside the body is your whole website content. So if you set a background, it will be behind all the content of the body.

You can create a new element inside the body with the size of the body and give that the background you want.

Example:

#background {
  background-image:url('http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png');
  background-position:left;
  background-repeat:no-repeat;
  
  height:100%;
  width:100%;
  z-index:1;
  position:absolute;    /* make it overlap your website content */
}
<body>
  
  <div id='background'></div>
  
  <div id='rest of your content'>
    ...
  </div>

</body>

Upvotes: 1

Related Questions