Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add background image in Bootstrap row

I would like to insert a full-width background image on this part of my page. Could someone please tell me which css rule i should follow? Because as far as i know you canot insert a background image inside a row. thanks

    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/profile.png" alt="">
                    <div class="intro-text">
                        <span class="name">HEADING</span>
                        <hr class="star-light">
                        <span class="skills">TEXT</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
like image 417
aptbs85 Avatar asked Feb 14 '16 20:02

aptbs85


People also ask

How do I add a background image to a container?

Steps to set the background image:Step 1: Add the Container widget. Step 2: Add the decoration parameter (inside Container) and assign the BoxDecoration class. Step 3: Add the image parameter (inside BoxDecoration) and assign the DecorationImage class.

How do you put a background image on a card body in HTML?

Use the card-img-overlay class to turn an image into a card background.

How do I change the background color of a row in bootstrap?

In order to change the color of the table row, we need to specify in <tr> tag with the required class & for changing the color of the table row then specify it inside <td> tag with the required class.


1 Answers

When you want to add a background image, <img> is not the way to go. Use the background-image property.

<header>
  <div class="container">
    <div class="row" 
         style="background:transparent url('img/profile.png') no-repeat center center /cover">
      <div class="col-lg-12">
        <div class="intro-text">
          <span class="name">HEADING</span>
          <hr class="star-light">
          <span class="skills">TEXT</span>
        </div>
      </div>
    </div>
  </div>
</header>

Please note that adding inline style is not recommended, I used it demonstrative here. The proper way to style your div would be to add a specific class or an ID to it and style it inside your CSS files.

In the snippet above I used the background shorthand property to set the background-image. This shorthand allows setting background color, image, repeat, origin, clip, position and size in a single declaration. You can skip any of them, but size must be prefixed with a / and come right after position.

like image 105
tao Avatar answered Oct 08 '22 18:10

tao