Entrar | Registrar | FAQ
Anonymous

Unexplicable behaviour.

+ Postar uma resposta

2 Mensagens Página 1 de 1


Unexplicable behaviour.

por mrfdes » Qui Abr 26, 2018 3:00 pm

Hello,
I made a page, which I even copied from a tutorial. my CSS looks like this:
Código: Selecionar tudo
/* 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:

Código: Selecionar tudo
<!--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 de usuário

mrfdes

  • Mensagens: 1
  • Data de registro: Qui Abr 26, 2018 2:18 pm

Re: Unexplicable behaviour.

por meow » Qui Mai 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.
Código: Selecionar tudo
html,body,#intro   { height: 100% }
Avatar de usuário

meow

  • Mensagens: 5
  • Data de registro: Qui Mai 03, 2018 4:53 pm


+ Postar uma resposta

Página 1 de 1