堆棧內存溢出
  簡體   English   中英

背景圖片無法覆蓋整個頁面

[英]Background image does not cover the entire page

 原文  2016-01-11 14:05:27  0   6    html/ css

問題描述

我正在嘗試應用背景圖片覆蓋整個頁面。 有人可以告訴我我做錯了什么嗎？ 我的背景圖片沒有覆蓋整個頁面。 這是頁面：

http://codepen.io/aitruong/pen/mVmKYR 

.my-photo{
  margin-top: 20px;

}

p{
  padding-top: 40px;
}

hr{
  width: 200px;

}

.navbar{
  margin-left:128px;
  margin-right: 128px;
}

.social-icon{
  margin-left:350px;
  margin-top:40px;
}
.text{
  margin-left: 365px;
  margin-top: 50px;

  font-size: 40px;
  font-family:Tangerine;

}
#language-text{
  font-family:Tangerine;
  font-size: 35px;
  margin-left: 300px;
  padding-top: 0px;

}
i{
  color: #e67200;
}

#android-app {
  margin-left : 90px;
}

footer p,a{
  margin-left: 0px;
  color:#666600
}

#background{

}

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container--fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>

    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1" class="active"><i class="fa fa-user"> </i> About</a></li>
          <li><a href="#section2"><i class="fa fa-pencil-square-o"> </i> Portfolio</a></li>
          <li><a href="#section3"><i class="fa fa-envelope-o"></i> Contact</a></li>

        </ul>
      </div>
    </div>
    <div>
  </div>
</nav>    
<div id="background">
<div id="section1" class="container">
  <div class="row">

  <div class="col-xs-2"><img class=" img-responsive img-circle my-photo"  src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
    <div class="col-xs-10"><p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University.  </p></div>   
  </div>
  <hr>

  <p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
  <div class="social-icon">
  <img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/> 
   <img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/> 
   <img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/> 
    <img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
    <img  id="java"  style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>

  </div> 
  </div>
<div id="section2" class="container">

  <h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3><br>
  <div class="row">
    <div class="col-sm-4">
      <p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p> 

      <img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5"   class="img-responsive" style="width:100%; height:320px" alt="Image">
    </div>
    <div class="col-sm-4"> 
      <p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
      <img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
    </div>
    <div class="col-sm-4"> 
      <p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
      <img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
    </div>

</div><br>

  </div>   
</div>
<div id="section3" class="container">
  <p class="text"> Ways to contact me:</p>
  <div class="social-icon">
 <a href="https://www.linkedin.com/in/ai-truong-1b071861" target="_blank"> <img   src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/> </a>
  <a href="https://github.com/aitruong" target="_blank"> <img  src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/> </a>
  <a href="mailto:happymina21@yahoo.com"><img  src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/> </a>   
  </div>    
    </div>
   </div>
 </div>

</body>

6 個解決方案

解決方案1
 2  2016-01-11 14:11:51

除了您現有的CSS外，您可能還需要以下代碼： 

body { background-size: cover; }

解決方案2
 1  2016-01-11 14:14:53

您的代碼中有兩個錯誤： 

body { background-size: cover; }

不見了。 但除此之外，您需要將section3元素放入背景div中。 否則背景將在第3節之前停止 

</div><!-- This is your end of <div id="background"> -->
<div id="section3"> <!-- this is a new section outside of the background element -->

解決方案3
 0  2016-01-11 14:15:40

HTML文檔的結構也是無效的。 使用以下HTML代碼： 

<!DOCTYPE html>
<html>
   <head>
      <title>Ai Truong Personal's Website</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
             $("#css").load(function(evt){
               $(this).fadeIn(); 

            });
             $("#html").load(function(evt){
               $(this).fadeIn("slow");    

            });
             $("#js").load(function(evt){
               $(this).fadeIn(5000);  

            });

             $("#python").load(function(evt){
               $(this).fadeIn(4000);  

            });
             $("#java").load(function(evt){
               $(this).fadeIn(2000);  

            });
             });
      </script>
      <style>
         body {
         position: relative;
         font-family: Open Sans;
         background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
         background-repeat: repeat;
         }
         #section1 {padding-top:50px;height:500px;color: #fff; background-color: #6a5750;}
         #section2 {padding-top:0px;height:500px;color: #fff; background-color: #f6f1ed;}
         #section3 {padding-top:0px;height:300px;color: #fff; background-color: #b5a397;}
      </style>
   </head>
   <body data-spy="scroll" data-target=".navbar" data-offset="50">
      <nav class="navbar navbar-inverse navbar-fixed-top">
         <div class="container--fluid">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>                        
               </button>
            </div>
            <div>
               <div class="collapse navbar-collapse" id="myNavbar">
                  <ul class="nav navbar-nav">
                     <li><a href="#section1" class="active"><i class="fa fa-user"> </i> About</a></li>
                     <li><a href="#section2"><i class="fa fa-pencil-square-o"> </i> Portfolio</a></li>
                     <li><a href="#section3"><i class="fa fa-envelope-o"></i> Contact</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </nav>
      <div id="background">
         <div id="section1" class="container">
            <div class="row">
               <div class="col-xs-2"><img class=" img-responsive img-circle my-photo"  src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
               <div class="col-xs-10">
                  <p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University.  </p>
               </div>
            </div>
            <hr>
            <p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
            <div class="social-icon">
               <img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/> 
               <img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/> 
               <img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/> 
               <img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
               <img  id="java"  style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
            </div>
         </div>
         <div id="section2" class="container">
            <h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3>
            <br>
            <div class="row">
               <div class="col-sm-4">
                  <p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
                  <img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5"   class="img-responsive" style="width:100%; height:320px" alt="Image">
               </div>
               <div class="col-sm-4">
                  <p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
                  <img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
               </div>
               <div class="col-sm-4">
                  <p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
                  <img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
               </div>
            </div>
            <br>
         </div>
      </div>
      <div id="section3" class="container">
         <p class="text"> Ways to contact me:</p>
         <div class="social-icon">
            <a href="https://www.linkedin.com/in/ai-truong-1b071861" target="_blank"> <img   src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/> </a>
            <a href="https://github.com/aitruong" target="_blank"> <img  src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/> </a>
            <a href="mailto:happymina21@yahoo.com"><img  src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/> </a>
         </div>
      </div>
      <!-- Footer -->
      <footer class="container-fluid bg-4 text-center">
         <p > Theme Made By Ai Truong<a href="#"></a> &#169 2016</p>
      </footer>
   </body>
</html>

替換以下CSS： 

#background{
    background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
}

帶有： 

body{
    background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
    background-repeat: repeat;
}

解決方案4
 0  2016-01-11 14:17:28

嘗試應用此： 

body{
    background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
    background-repeat: intial;    
}

解決方案5
 0  2016-01-11 14:28:11

這樣設置背景 

background: #ffffff url(bg.jpg) repeat;

例如對於身體，設置您的CSS 

body { background: #ffffff url(your_bg.jpg) repeat; }

解決方案6
 0  2016-01-11 15:24:51

嘗試過： 

#ImageBackground { 
      background-size: cover; 
      Width: 100%;
      Height: auto;
}

另外，您可以嘗試： 

#ImageBackground { 
      Width: 100%;
      -webkit-background-size: cover;
        -moz-background-size: cover;
          -o-background-size: cover;
            background-size: cover;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 背景圖片無法覆蓋整個頁面 顯示一半圖像以覆蓋整個背景圖像 背景圖片無法覆蓋整個網頁 背景圖像不會覆蓋整個屏幕 為什么背景圖片有時不能覆蓋整個頁面？ 手機無法覆蓋背景圖片 引導頁腳不會覆蓋頁面的整個寬度 背景覆蓋整個屏幕 背景圖像封面無法按比例縮小圖像 背景圖片：始終覆蓋整個頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM