Lost background

Question

Why is the background not displayed with this code?

#home { background-image: url("../images/cover-bg.jpg"); background-color: #222; background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 0; } .intro { position: absolute; width: 100%; top: 50%; left: 0; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); padding: 0 15px; }

 <section id="home" class="text-center"> <div class="home-overlay"></div> <div class="intro horizontal-center"> <p class="homeIntro">Lorem lorem Lorem lorem</p> <h1>Lorem lorem </h1> <p class="homeIntro">Lorem lorem Lorem loremLorem lorem </p> </div> </section>

Just for clarity, the background is not displayed for some reason (Obviously, position: absolute), and I don’t know how to fix it :(

Yuri yuri 13.3k 5 gold signs 39 silver marks 83 bronze marks · Accepted Answer · 2017-02-04T10:47:37

Set the width and height for #home . When a child element has position: absolute , the parent does not see it structurally and therefore does not take into account its dimensions; and because of this, the width and height of #home = 0.

 #home { background-image: url("../images/cover-bg.jpg"); background-color: #222; background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 0; /* Ширина и высота */ width: 100vw; height: 100vh; } .intro { position: absolute; width: 100%; top: 50%; left: 0; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); padding: 0 15px; }

 <section id="home" class="text-center"> <div class="home-overlay"></div> <div class="intro horizontal-center"> <p class="homeIntro">Lorem lorem Lorem lorem</p> <h1>Lorem lorem </h1> <p class="homeIntro">Lorem lorem Lorem loremLorem lorem </p> </div> </section>

Answer 2 · 2017-02-04T10:44:46

It is obvious that the #home block #home not have height, due to the fact that inside it there is an absolutely positioned block that is not in the document stream.

 #home { height: 1000px; background: #222 url("https://mobidevices.ru/images/2017/01/MacBook-Pro-2016.jpg") no-repeat 50% / cover fixed; padding: 0; } .intro { position: absolute; width: 100%; top: 50%; left: 0; padding: 0 15px; }

 <section id="home" class="text-center"> <div class="home-overlay"></div> <div class="intro horizontal-center"> <p class="homeIntro">Lorem lorem Lorem lorem</p> <h1>Lorem lorem </h1> <p class="homeIntro">Lorem lorem Lorem loremLorem lorem </p> </div> </section>

We first read in the comments that I assumed it was because of the link and added an answer, and then copied my answer about the dimensions ..
Your comment has not yet been read and I do not know what is there.

Lost background

2 answers 2

More articles: