HOWTO设置一个div背景图像

上面我试图做到这一点： https://www.dropbox.com/s/3zm1qssd3299uat/Social-Bottom.jpg HOWTO设置一个div背景图像

我想要凌驾于背景DIV类似上面的图像内容股利。

这里是我当前的代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>VisionBeat DJ's Australia</title> 
    <script type="text/javascript" src="./js/jquery.js"></script> 
    <script type="text/javascript" src="./js/nav.js"></script> 
    <LINK REL="SHORTCUT ICON" HREF="./favicon.ico"> 
    <style> 
     @font-face { 
      font-family:"bold"; 
      src: url('./fonts/bold.ttf'); 
     } 
     @font-face { 
      font-family:"sbold"; 
      src: url('./fonts/sbold.ttf'); 
     } 
     @font-face { 
      font-family:"regular"; 
      src: url('./fonts/regular.ttf'); 
     } 
     @font-face { 
      font-family:"light"; 
      src: url('./fonts/light.ttf'); 
     } 
     @font-face { 
      font-family:"elight"; 
      src: url('./fonts/elight.ttf'); 
     } 
     html, body { 
      height: 100%; 
      width: 100%; 
      overflow:auto; 
      margin:0; 
      padding:0; 
      border:0; 
      font-family:'regular', sans-serif; 
     } 
     #bg1 { 
      height: 100%; 
      width: 100%; 
      background: url(./images/backgrounds/1.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
      z-index:0; 
     } 
     #bg2 { 
      height: 100%; 
      width: 100%; 
      background: url(./images/backgrounds/2.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
      z-index:1; 
     } 
     #bg3 { 
      height: 100%; 
      width: 100%; 
      background: url(./images/backgrounds/3.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
      z-index:2; 
     } 
     h1 { 
      font-family:'bold', sans-serif; 
      font-weight:700; 
      color:#ecf0f1 
     } 
     h2 { 
      font-family:'sbold', sans-serif; 
      font-weight:600; 
      color:#ecf0f1 
     } 
     p1 { 
      font-family:'regular', sans-serif; 
      font-weight:400; 
      color:#ecf0f1 
     } 
     p2 { 
      font-family:'light', sans-serif; 
      font-weight:300; 
      color:#ecf0f1 
     } 
     a { 
      font-family:'elight', sans-serif; 
      font-weight:300; 
      color:#ecf0f1; 
      top:0; 
      bottom:0; 
      left:0; 
      right:0; 
      text-decoration:none 
     } 
     a:hover { 
      font-family:'elight', sans-serif; 
      font-weight:200; 
      color:#ecf0f1; 
      top:0; 
      bottom:0; 
      left:0; 
      right:0; 
     } 
     nav { 
      color:rgba(45, 45, 45, 0.5); 
      font-size:1.2em; 
      font-weight:300; 
      -webkit-touch-callout: none; 
      -webkit-user-select: none; 
      -khtml-user-select: none; 
      -moz-user-select: -moz-none; 
      -ms-user-select: none; 
      user-select: none; 
      transition: border-color 0.5s ease; 
      border-top:1.5px solid; 
      border-color:rgba(45, 45, 45, 0); 
     } 
     nav a { 
      transition: border-color 0.5s ease; 
      border-top:1.5px solid; 
      border-color:rgba(45, 45, 45, 0); 
     } 
     nav a:hover { 
      border-color: rgba(236, 240, 241, 0.9) 
     } 
     #floater { 
      position:relative; 
      float:left; 
      height:50%; 
      margin-bottom:-100px; 
      width:1px; 
     } 
     #centered { 
      position:relative; 
      clear:left; 
      height:250px; 
     } 
     #centerfit { 
      text-align: center; 
      margin-left: auto; 
      margin-right: auto; 
      max-height: 250px; 
     } 
     #sticky_navigation_wrapper { 
      width:100%; 
      height:30px; 
     } 
     #sticky_navigation { 
      width:100%; 
      height:32px; 
      background-color:rgba(45, 45, 45, 0.75); 
      text-align:center; 
      -moz-box-shadow: 0 0 5px #999; 
      -webkit-box-shadow: 0 0 5px #999; 
      box-shadow: 0 0 5px #999; 
     } 
    </style> 
</head> 

<body> 
    <div id="bg1"> 
     <div id="floater"></div> 
     <div id="centered"> 
      <div id="centerfit"> 
       <img src="images/logo.png" alt="VisionBeat Logo"> 
      </div> 
      <div id="sticky_navigation_wrapper"> 
       <div id="sticky_navigation"> 
        <nav> 
         <a href="#Social">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Social&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> 
         <a href="#Contact">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> 
         <a href="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> 
         <a href="#Events">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Events&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> 
         <a href="#Pricing">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pricing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> 
        </nav> 
       </div> 
      </div> 
     </div> 
    </div> 
    <section id="Social"></section> 
    <div id="bg2"></div> 
</body>

来源

2013-11-03 user2078379

请勿使用作为间距。使用CSS填充/边距或其他方法。 – aurbano

看看我的答案在同一[问题]（http://stackoverflow.com/questions/18658032/how-to-create-effect-of-divs-floating-over-image-with-css-and-js-jquery/18658196＃18658196）。 – mdesdev

你想要做的是设置在body标签的背景图像，并有什么一定要上的元素使用CSS定位您设置一个z-index 。我想你正面临着问题，你的内容div不在背景图片上方。尝试设置绝对内容div的位置，并确保在body标签上设置背景图像。

来源

2013-11-15 17:23:26 florianrogner

HOWTO设置一个div背景图像

回答

相关问题