Zaloguj | Zarejestruj | FAQ
Anonymous

Unexplicable behaviour.

+ Odpowiedz

Posty: 2 Strona 1 z 1


Unexplicable behaviour.

przez mrfdes » Cz kwi 26, 2018 3:00 pm

Hello,
I made a page, which I even copied from a tutorial. my CSS looks like this:
Kod: Zaznacz cały
/* Your custom styles */
body,
header,
#intro{
    height: 100%;
}
#intro{
    background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



Yet, in the page, no image shows up at all, even if I use a picture directly from the /img folder.
When I type the above URL in a browser, the picture shows perfectly.

An excerpt from the HTML code where the intro id is situated looks like this:

Kod: Zaznacz cały
<!--Mask-->
<div id="intro" class="view">

    <div class="full-bg-img">
     
    </div>
</div>
<!--Mask-->



I REALLY have no idea why the image is not showing in my background.
Any advice will be much appreciated.
Thank you in advance.
Avatar użytkownika

mrfdes

  • Posty: 1
  • Dołączył(a): Cz kwi 26, 2018 2:18 pm

Re: Unexplicable behaviour.

przez meow » Cz maja 03, 2018 6:22 pm

Because your 100% height rule doesn't work. Everything collapses since there is no content, #intro has no height.

The way do to 100% height is like this.
Kod: Zaznacz cały
html,body,#intro   { height: 100% }
Avatar użytkownika

meow

  • Posty: 5
  • Dołączył(a): Cz maja 03, 2018 4:53 pm


+ Odpowiedz

Strona 1 z 1