CODEWITHSUNDEEP
csshtmltwitter-bootstrapbackground
Lord Viktor
Lord Viktor

Reputation: 1

How to add background images for jumbotron in bootstrap?

I started with bootstrap just 2 days ago.

The problem i'm facing now is that i'm unable to put background image to my whole page or even my jumbotron. I tried directly giving the path (both relative and absolute) to the div tag, but it didn't work. I Also have tried through css, but still I dont see any background image in my output. Please help!

I mainly want to have a background image for the jumbotron.

This is the code i wrote:

Html:

<div class="row">
    <div class="jumbotron">
        <div class="container">
            <center>
                <h1>Avudo computers</h1>
                <h5>Redesigning HOPES.</h5>
            </center>
        </div>
    </div>
</div>

Css:

background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;

Upvotes: 0

Views: 10218

Answers (2)

vanburen
vanburen

Reputation: 21663

If seems like you simply haven't declared a class/ID in your CSS.

You have to attach .jumbotron to your CSS rules.

See example.

body,
html {
  background: url(http://i.telegraph.co.uk/multimedia/archive/02423/london_2423609k.jpg) center center no-repeat;
  background-size: cover;
  height: 100%;
}
div.jumbotron {
  background-image: url(http://placehold.it/1350x550/f00/f00);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  text-shadow: black 0.3em 0.3em 0.3em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
  <div class="container">
    <center>
      <h1>Avudo computers</h1>
      <h5>Redesigning HOPES.</h5>
    </center>
  </div>
</div>

Upvotes: 3

soorapadman
soorapadman

Reputation: 4509

Try like this to set image for whole page

body  {
    background-image: url(../img/jumbotronbackground.jpg);

}

Upvotes: 0

Related Questions