Login | Register | FAQ
Anonymous

Unexplicable behaviour.

+ Post a reply

2 posts Page 1 of 1


Unexplicable behaviour.

by mrfdes » Thu Apr 26, 2018 3:00 pm

Hello,
I made a page, which I even copied from a tutorial. my CSS looks like this:
Code: Select all
/* 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:

Code: Select all
<!--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.
User avatar

mrfdes

  • Posts: 1
  • Joined: Thu Apr 26, 2018 2:18 pm

Re: Unexplicable behaviour.

by meow » Thu May 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.
Code: Select all
html,body,#intro   { height: 100% }
User avatar

meow

  • Posts: 5
  • Joined: Thu May 03, 2018 4:53 pm


+ Post a reply

Page 1 of 1