为什么我的图像不适合100％背景 [英] Why does my image not fit 100% background

问题描述

我正在尝试使我的背景图像适合100％的屏幕宽度和高度.但这甚至不显示我的形象.谁能告诉我，我在做什么错.

I am trying to make my background image fit 100% screen width and hight. But it does not even show my image. Any that can tell me, what i am doing wrong.

在这里您可以看到我尝试过的代码.而且我不明白为什么它不起作用.

Here you can see the code, that i've tryed. And i don't get why it dont work.

<section id="forside" >
      <div class="container">
            <div class="row">
            </div>
      </div>
</section>

#forside {
    background: url(images/FBIlled.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我的图像甚至没有被显示出来.它只是空白.我希望我的ID为"forside"的部分的图片FBIlled为100％屏幕宽度和高度.完整的代码可以在这里显示: https://codepen.io/anon/pen/maLYrZ

My image is not even getting showen. It's just blank. I wish that my section with id="forside" had the image FBIlled to be 100% screen width and hight. Full code can be showen here: https://codepen.io/anon/pen/maLYrZ

推荐答案

更好的主意:

Even better idea:

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

.bg { 
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%; 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="bg"></div>

将代码放入div中.
取自 https://www.w3schools.com/howto/howto_css_full_page.asp .

这篇关于为什么我的图像不适合100％背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！