我想要在 Bootstrap 中的背景图像答案

【问题标题】：I want an image in background in Bootstrap我想要在 Bootstrap 中的背景图像
【发布时间】：2015-05-09 00:28:47
【问题描述】：

帮我把图片放在背景而不是背景颜色我已经尝试过 Bootstrap 的“img-responsive img-center”html 标签，但它没有出现在文本后面，而且 CSS“background-image: url(”);”根本不起作用

这里是 CSS：

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
}

header .container {
    padding-top: 74px;
    padding-bottom: 263px;
}

header .intro {
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    text-transform: uppercase;
     font-weight: 900;
     letter-spacing: 1px;  
}

header .subintro {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 500;
}

Here is HTML

<header>
	<div class="container"> 
		<div class="row">
			<div class="col-lg-12">
				<div class="intro-text">
					<span class="intro" id="mainIntro">We will lead the way</span></br>
					<span class="subintro" id="secondIntro">We provide not better but best in the world</span></br>
					<button type="button" class="btn btn-default" id="introBtn">START YOUR JOURNEY</button>
				</div>
				</div>
			</div>
		</div>
	</div>
</header>

【问题讨论】：

您的 HTML 或 CSS 中任何地方都没有图像。
我试过他们不工作所以我删除然后张贴在那里询问正确的解决方案

标签： html css twitter-bootstrap

【解决方案1】：

在background-color 设置之后将background-image: url() 和background-size: cover 添加到标头的css 声明中

(DEMO)

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
    background-image: url(http://www.lorempixel.com/1000/1000);
    background-size: cover;
}

【讨论】：

我想要背景图片而不是颜色
background-image: url("../images/gentleMan.jpg"); background-size: cover; 这对我有用，谢谢！

【解决方案2】：

这应该很简单

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
    background-image: url(http://lorempixel.com/output/abstract-q-g-640-480-8.jpg);
    /* or insert appropriate path to your image */
}

header {
    text-align: center;
    color: #fff;
    background-color: #31353D;
    background-image: url(http://lorempixel.com/output/abstract-q-g-640-480-8.jpg);
    /* or insert appropriate path to your image */
}

header .container {
    padding-top: 74px;
    padding-bottom: 263px;
}

header .intro {
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    text-transform: uppercase;
     font-weight: 900;
     letter-spacing: 1px;  
}

header .subintro {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: 500;
}

Here is HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<header>
	<div class="container"> 
		<div class="row">
			<div class="col-lg-12">
				<div class="intro-text">
					<span class="intro" id="mainIntro">We will lead the way</span></br>
					<span class="subintro" id="secondIntro">We provide not better but best in the world</span></br>
					<button type="button" class="btn btn-default" id="introBtn">START YOUR JOURNEY</button>
				</div>
				</div>
			</div>
		</div>
	</div>
</header>

【讨论】：