2015-09-09 73 views
0

所以我用這個背景圖片留在網上與一個品牌包的網站,我已經將它設置方式如下:HTML背景圖像搞砸與內容之上

html { 
    background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

但是,當我通過html添加圖片(這是在PNG格式,並在背景上是透明的)一個大的白色條帶來它。爲了解決這個問題我把屍體在CSS一回地面以下方式:

body { 
    background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
    margin-top: 80px; 
    font-family: 'passport', sans-serif; 
    color: #000; 
} 

這是結果: enter image description here

正如你可以在圖像的頂部看到的是與HTML設置背景以及徽標的位置是背景與身體一起設置的位置。有人可以幫我把這個背景設置爲像這個圖像的頂部,當我有內容ontop嗎?

圖像尺寸是300x150

@import url(../fonts/VINCHAND.ttf); 
@import url(../fonts/Passport.ttf); 

/*! 
Main Page CSS || Created By Thomas Withers @ Ice7Media 
*/ 

/* Global Styles 
============================================================ */ 
html { 
    background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

body { 
    padding-top: 50px; 
    background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
    font-family: 'passport', sans-serif; 
    color: #000; 
} 

h1, 
h2, 
h3, 
h4, 
h5 { 
    font-family: 'passport', 'Open Sans', sans-serif; 
    color: #000; 
} 

p { 
    font-family: 'passport', sans-serif; 
    color: #000; 
} 

#topnavbar { 
    margin: 0; 
} 
#topnavbar.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
.banner { 
    padding-bottom: 50px; 
} 

.banner img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 
<!DOCTYPE html> 
<html lang="en"> 

<head> 

<!-- Meta charset 
===================================================================================--> 
     <meta charset="utf-8"> 

<!-- Title 
===================================================================================--> 
     <title>Bocaditio | South Amercian Dishes</title> 

<!-- Meta Tags 
===================================================================================--> 
     <meta name="author" content="Thomas Withers @ Ice7Media"> 
     <meta name="description" content="Social Media Wizzards that handle all of your social media markerting."> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

     <!-- CSS Stylesheets 
===================================================================================--> 
     <link href = "css/bootstrap.min.css" rel = "stylesheet"> 
     <link href = "css/new_Custom.css" rel = "stylesheet"> 
     <link href = "css/Mapstyle.css" rel = "stylesheet"> 
     <link rel="stylesheet" href="css/animate.css"> 
     <link rel="shortcut icon" href="img/iceBox.png"> 

<!-- Custom Fonts 
===================================================================================--> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
     <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> 
    </head> 

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 

<!-- Logo Section 
===================================================================================--> 
    <section class="banner" id="banner"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <img src="img/BocaditoLogo_113x300.png"> 
       </div> 
      </div> 
     </div> 
    </section> 

<!-- Navigation 
===================================================================================--> 
    <nav class="navbar navbar-default navbar-static-top" role="navigation" id="MainNav"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">   
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Nav 1</a></li> 
        <li><a href="#">Nav 2</a></li> 
        <li><a href="#">Nav 3</a></li> 
        <li><a href="#">Nav 4</a></li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- container-fluid --> 
    </nav> 
<!-- Full screen Slider  
===================================================================================--> 
<!-- Welcome Message 
===================================================================================--> 
<!-- Latest Blog Post 
===================================================================================--> 
<!-- Three Images 
===================================================================================--> 
<!-- Map & Conatct 
===================================================================================--> 
<!-- Footer 
===================================================================================--> 
<!-- Scripts 
===================================================================================--> 
    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script> 
    <script src="js/jquery.easing.min.js"></script> 
    <script src="js/fix-nav.js"></script> 
    <script src="js/main.js"></script> 
    <script> 
    $('.carousel').carousel({ 
     interval: 5000 //changes the speed 
    }) 
    </script> 
</body> 

</html> 

任何幫助表示讚賞

+2

爲什麼身體有一個'保證金top' –

+0

@Paulie_D剛添加的,所以你可以看到其中的差別去除沒有效果 –

+1

在我們看不到的那一刻任何事情,因爲我們沒有接觸到我法師或演示該問題的演示中的關聯HTML。 –

回答

0

如果我理解正確的話,你想砸body背景和html掉落background-size
但是,這也要求你改變no-repeatrepeat,這將導致頁面與圖像平鋪:

html { 
 
    background: url(http://lorempixel.com/g/150/300/) repeat center center fixed; 
 
} 
 
body { 
 
    margin-top: 80px; 
 
    font-family: 'passport', sans-serif; 
 
    color: #000; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
     Test 
 
    </body> 
 
</html>

如果你只是想垂直重複圖像,使用repeat-y而不是和設置background-size: 100% auto;

html { 
 
    background: url(http://lorempixel.com/g/150/300/) repeat-y center center fixed; 
 
    -webkit-background-size: 100% auto; 
 
    -moz-background-size: 100% auto; 
 
    -o-background-size: 100% auto; 
 
    background-size: 100% auto; 
 
} 
 
body { 
 
    margin-top: 80px; 
 
    font-family: 'passport', sans-serif; 
 
    color: #000; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
     Test 
 
    </body> 
 
</html>

+0

這是行不通的,正如你在下面的圖片中看到的那樣,圖像背後還沒有背景,這是我需要的...... https://i.gyazo。 com/dc3d96cbab3e1c26757d58b30db51b39.jpg –

+0

@TomTucka然後你的'html'標籤有一個'margin-top',或者'section,#banner,.banner,.container,.row,.col-lg-12'這些的任何組合)具有白色背景設置。您應該能夠使用瀏覽器的開發工具查看來自哪裏。 – Siguza

0

固定。

@siguza說,這可能是一個背景顏色設定,在檢查元素更多,我發現它被設置在,我從來沒有想過的bootstrap.min.css ...

做這個固定

body { 
    padding-top: 50px; 
    font-family: 'passport', sans-serif; 
    color: #000; 
    background-color: transparent; 
} 

再次感謝Siguza