Question

我的问题是如何在Bootstrap中设置标题的全宽和高度背景图像，如http://demo.evenfly.com/view?theme=SantaGo（我不期待动画，我期待如何制作适合屏幕的背景）？

这是我到目前为止所做的，

https://jsfiddle.net/dimshik/posm3cwk/5/

HTML：

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="sltac.css">
  </head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back> 
</div>
</header>
</body>
</html>

CSS：

body{
    margin:0;
    padding:0;
    width:100%;
}

#jumboid{
    width:100% ;

}

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;

}

header{
     width:100%;
  height:100%;
  height:calc(100% - 1px);
  background-image:url('a.jpg');
  background-size:cover;
}

最后我期待这样的结果（如果我拍完整页屏幕截图），

https://codepen.io/anon/pen/reYRBo

Answer 1

无需使用额外的图片标签。只需设置背景和属性background-size: cover

即可

试试这样：

html,
body {
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  height: 100%;
  background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
  background-size: cover;
}

<body>

  <header>

  </header>
</body>

Answer 2

#jumboid内有background-image个标记吗？

如果您不这样做，可以使用#jumboid上的#jumboid{ width:100% ; height: 100vh; background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg); background-size: cover; background-repeat: no-repeat; }轻松解决问题。

编辑css如下：

 contentStream.beginText()
 contentStream.moveTextPositionByAmount(250, 665)
 contentStream.drawString("1  2 3 4 5 6    7  8  9   1 0")
 contentStream.endText()

（分叉）示例：https://codepen.io/pimskie/pen/wGPOar

Answer 3

简单地使用，使用contain保持您的bg-img可扩展性和响应性

background-size:contain;

如果想要有一个固定的标题高度，并且不想将图像背景缩放到标题的宽度 -

background-size:100% 100%;

Answer 4

您好试试这段代码，这就是您要找的。

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="sltac.css">
</head>

<body>
  <header>
    <div class="row">
      <div class="bg-image" id="jumboid">
      </div>

    </div>
  </header>
  <div class="restofthecontent">
    <p>your content</p>
  </div>





</body>

</html>

 public class ViewImportPreviewViewModel:BindableBase
    {
        private IEventAggregator eventAggregator;  //event aggregator to enable Studio button in different ViewModel

        private readonly IRegionManager regionManager; //region manager for navigation to the main menu

        public CompositeCommand FinalizeImportClick{get;set;}//composite command to register multiple command for finalize import button click


        public ViewImportPreviewViewModel(IRegionManager regionManager, IEventAggregator eventAggregator) //constructor
        {
            this.eventAggregator = eventAggregator;
            this.regionManager = regionManager;

            FinalizeImportClick = new CompositeCommand();
            FinalizeImportClick.RegisterCommand(new DelegateCommand<string>(NavigateToMain)); //register a delegate command for finalize import button click


        }


        //subscriber method to the firs delegate command registered with finalize button click
        private void NavigateToMain(string argument) 
        {
            //it enables the studio button after import and sends it to the main menu view XAML
            eventAggregator.GetEvent<ButtonEnableEvent>().Publish("ImportDone");

            //it navigates to the main menu after import
            regionManager.RequestNavigate("ScreenNavigationRegion", argument); 

            //publish an event for the main buttons viewmodel and then over there try to fade in main buttons
            eventAggregator.GetEvent<FadeinButtonsEvent>().Publish("ImportDone");
        }


    }

Answer 5

将您的图片放在DIV的背景中，而不是<img>标记中的css。

并将该DIV放在CSS下面。

.Your_DV {
 background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}

在Bootstrap中设置标题的全宽背景图像

5 个答案: