Bootstrap-background image with content overlay

Я хочу использовать фоновое изображение и иметь весь контент моей страницы на белом фоне поверх изображения.Bootstrap-background image with content overlay

Я попытался

.body { 
    background: url('background.jpg'); 
    background-size: cover; 
}

html{ 
    /* This image will be displayed fullscreen */ 
    background:url('background.jpg') no-repeat center center; 

    min-height:100%; 
    background-size:cover; 
}

, но ни один из них работает. Первый ничего не меняет, а со второй я вижу небольшую полосу моего изображения в нижней части экрана.

Вот мой урезана код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="pics/icon.ico"> 

    <title>News</title> 

    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <!-- Custom styles for this template --> 
    <link href="css/styles.css" rel="stylesheet"> 

    <link href="carousel.css" rel="stylesheet"> 
    </head> 
    <body id="news"> 
     <nav class="navbar navbar-inverse navbar-static-top"> 
      <!---navbar content--> 
     </nav> 


    <div class="container" style="background:white;"> 

     <div class="row row-offcanvas row-offcanvas-right"> 

     <div class="col-xs-12 col-sm-9"> 
      <p class="pull-right visible-xs"> 
      <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> 
      </p> 
      <div class="jumbotron"> 
      <h1>headline</h1> 
      <p>subheadline</p> 
      </div> 
      <div class="row"> 
      <!--content snipped--> 
      </div><!--/row--> 
     </div><!--/.col-xs-12.col-sm-9--> 
     </div><!--/row--> 

     <hr> 

    <footer> 
     <p class="pull-right"><a href="#">Back to top</a></p> 
     <p>&copy; 2015 </p> 
    </footer> 

    </div><!--/.container--> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="js/jquery-2.1.4.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/ie10-viewport-bug-workaround.js"></script> 
    <script src="offcanvas.js"></script> 

    </body> 
</html>

источник

2015-11-24 user2782067

в вашем стиле изменения

body { 
    background: url('background.jpg'); 
    background-size: cover; 
}

и html

<div class="container" style="background:transparent;">

источник

2015-11-24 07:50:30

Это work.Try этот

html{ 
     background-image: url('background.jpg'); 
     background-repeat: no-repeat; 
     background-size: cover; 
    }

и дать цвет фона: белый в DIV или пункт, где вы хотите белый фон.

источник

2015-11-24 07:41:20 user3883089

Первый один, нет класса "тело",

.body { // if you want to choose body object, you have to remove dot 
background: url('background.jpg'); 
background-size: cover; 
}

Второй один, ваш контейнер DIV имеет фона CSS

<div class="container" style="background:white;">

источник

2015-11-24 07:46:32 Ray

Bootstrap-background image with content overlay

ответ

Смежные вопросы