0

I want to create a background image that will have no effect on other divs in my document. I have this code over here that works great:

body,
html {
  height: 100%;
  margin: 0;
}

#bg {
  /* The image used */
  background-color: rgb(0, 0, 0);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#heading {
  position: absolute;
  text-align: center;
  vertical-align: central;
  width: 40%;
  left: 30%;
  color: #F82473;
}
<div id="heading">Some stuff</div>
<div id="bg"></div>

But if I switch my divs' order then it's working weird:

body,
html {
  height: 100%;
  margin: 0;
}

#bg {
  /* The image used */
  background-color: rgb(0, 0, 0);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#heading {
  position: absolute;
  text-align: center;
  vertical-align: central;
  width: 40%;
  left: 30%;
  color: #F82473;
}
<div id="bg"></div>
<div id="heading">Some stuff</div>

How should I paste background image on my website so it won't affect any other divs in my document?

Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
Ruslan Plastun
  • 1,985
  • 3
  • 21
  • 48
  • What do you mean by “affecting other divs” to begin with? And why are you not simply giving the background image to the html or body element, why are you introducing additional elements that then need to be positioned first? – CBroe Jul 24 '18 at 13:29
  • Because I am also using canvas, so I need div to easily hide background when I need. – Ruslan Plastun Jul 24 '18 at 13:38
  • Well then apply it by a class, and remove that class to “hide” it …? – CBroe Jul 24 '18 at 13:51

2 Answers2

2

Kindly use div into div as you have 2 divs. one is for background and other one for Heading it will be like 

<div class="bg"> 
  <div id="heading">Some stuff</div> 
// All the staff for background will goes here 

 </div>

it will work in your case and if you use other divs after this they will not have the background image.

Jahanzeb Nawaz
  • 1,128
  • 12
  • 11
1

Please first search before ask question

Use a DIV as a background for another element 

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}

.content{
    color: #FFFFFF;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
    position: relative;
    z-index: 100;
}

.background{
    color: #999999;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}
zani
  • 88
  • 9