CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Unkown
Unkown

Reputation: 31

I want an image in background in Bootstrap

Help me putting an image in background instead of background color I have tried Bootstrap's "img-responsive img-center" html tag but it doesn't appear behind text and CSS "background-image: url(");" not working at all

Here is 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>

Upvotes: 1

Views: 84

Answers (2)

Paulie_D
Paulie_D

Reputation: 115313

This should be simple

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>

Upvotes: 1

user4639281
user4639281

Reputation:

Add background-image: url() and background-size: cover to header's css declarations after the background-color setting

(DEMO)

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

Upvotes: 2

Related Questions