Bootstrap: jumbotron with full width and height of background image
I have a default jumbotron (inside a container)
<div class="jumbotron">
<h1>Example Page</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
How can I get the background image inside this jumbotron?
When I add
background: url('a.jpg') no-repeat center center;
to the .jumbotron
css class , then I don't get the image in width. I want it to expand, but to fill the jumbotron completely.
Here's the complete style
.jumbotron {
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
background: url('a.jpg') no-repeat center center;
}
source to share
The jumbotron can be inside the container and still be full width. Add this rule under the background image rule in your CSS:
background-size: cover;
If it's not full width yet, you can only add below rule:
width:100%;
The jumbotron probably has rounded corners. If so and you want to remove, add this rule:
border-radius:0;
Try the following:
.jumbotron {
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
background: url('a.jpg') no-repeat center center;
background-size: cover;
width:100%; // may not need
border-radius: 0; // override rounded corners if applicable
}
source to share
you can use
background: url('a.jpg') 50% /cover;
This is shorthand for
background-image: url('a.jpg');
background-position-x: 50%;
background-position-y: center;
background-size: cover;
In an abbreviation, the background
value for background-size
must be placed immediately after the value for background-position
and must be prefixed /
.
Please note that you do not need center center
shorthand. You can use center
(parsed as center center
or 50%
(parsed as 50% center
, which is similar center center
but shorter).
Please note that without values background-position
, background-size
will not work in shorthand.
Also note that you don't need no-repeat
(= background-repeat:no-repeat
) here, as elements with background-size:cover
cannot repeat the background, as its size matches the element's width and height, with one of them being cropped (unless the element has exactly the same ratio as the image - in this case, none are cropped).
source to share