2015-09-09 6 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 и где логотип, где фон устанавливается с телом. может кто-то, пожалуйста, помогите мне получить этот фоновый набор, как будто он находится в верхней части этого изображения, когда у меня есть контент на нем?

изображение Размеры 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

на данный момент мы не можем видеть ничего, поскольку у нас нет доступа к i мага или связанного с ним HTML в демонстрации, демонстрирующей проблему. –

ответ

0

Если я вас правильно понял, вы хотите отказаться от фона на body и падение background-size на html.
Но это также требует, чтобы изменить no-repeat к repeat, что приведет страницы к облицовке с этим изображением:

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, который я никогда не думал о ...

Fixed, делая это

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

Еще раз спасибо Siguza