CODEWITHSUNDEEP
csshtmlbootstrap-4
Lukas Thiersch
Lukas Thiersch

Reputation: 165

Bootstrap - img as container-fluid background

I want a header for my page which contains a greeting and has an image as the background. How do I achieve it that the image is the background of the container-fluid, but it scales with the text, so that it's fully responsive.

Thats the content of the header.

<!-- Introduction -->    
    <div class="container-fluid mr-auto">
        <h1>Willkommen</h1>
        <p>
            Willkommen auf der Seite des LuGy-Bienen-Livestreams! 
            Hier können Sie nun unsere kleinen Helferlein zu jeder Tageszeit beobachten! 
            Wir, das P-Seminar „Bienen erleben“, wünschen Ihnen viel Spaß beim Eintauchen in die Bienenwelt!
        </p> 
    </div> 
<!-- /Introduction -->

The image should be full-width in every situation.

Thanks for helping...

Upvotes: 2

Views: 4524

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14954

If you want to do it the "Bootstrap way" you can try the following code.

That's the jumbotron with the jumbotron-fluid at work there. Note that in this case I'm using the container class to make sure that people on wide 4K screens don't get mad at you. :-)

Also, read the comments in the code below and experiment by uncommenting/adding some of those parts to see what it does for you. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    #hero {
        background: url("https://picsum.photos/1280/710") no-repeat center;
        background-size: cover;
    }
</style>

<div class="jumbotron jumbotron-fluid" id="hero">
<!-- you can also add something like style="min-height: 70vh;" to the div above -->
    <div class="container">
<!--
        Uncomment this to see the effect of native Bootstrap classes:
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-->
        <div class="row">
            <div class="col">
                <h1>Willkommen</h1>
                <p>
                    Willkommen auf der Seite des LuGy-Bienen-Livestreams! 
                    Hier können Sie nun unsere kleinen Helferlein zu jeder Tageszeit beobachten! 
                    Wir, das P-Seminar „Bienen erleben“, wünschen Ihnen viel Spaß beim Eintauchen in die Bienenwelt!
                </p> 
            </div>
        </div>
    </div>
</div>

Upvotes: 4

Bhuwan
Bhuwan

Reputation: 16855

If you want your image should be full-width, You have to use background-size:cover css as it will scales the image as large as possible without stretching the image.

Note: If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

.bg-class {
  background-image: url(http://via.placeholder.com/350x150);
  background-size: cover;
  background-position: center center;
  padding: 20px;
}
<div class="container-fluid mr-auto bg-class">
  <h1>Willkommen</h1>
  <p>
    Willkommen auf der Seite des LuGy-Bienen-Livestreams! Hier können Sie nun unsere kleinen Helferlein zu jeder Tageszeit beobachten! Wir, das P-Seminar „Bienen erleben“, wünschen Ihnen viel Spaß beim Eintauchen in die Bienenwelt!
  </p>
</div>

Reference Link

Upvotes: 2

Related Questions