All geek questions in one place

Add background image to Bootstrap line

I would like to insert a full width background image on this part of my page. Can someone please tell me which css rule should i follow? Because, as far as I know, you cannot insert a background image inside a line. 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>
+5
source share
2 answers

If you want to add a background image, <img> not suitable. 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 an inline style is not recommended; I used it demonstratively here. The right way to style your div would be to add a specific class or identifier to it and style it inside your CSS files.

In the above snippet, I used the background shorthand property to set the background-image . This transcript allows you to set the background values ​​of color , image , position , repeat , origin , clip and size in one ad. They should be in that order. You can skip any of them, and size should have the / prefix.

Tip: to remember their order, I use the term procs (should be ciprocs , but procs easier to associate, and the fact that color and image are the first two are also easy).

+9
source

You can set the background-image: url('img.png') property in your css file to define it.

See here for more options.

0
source

Source: https://habr.com/ru/post/1242996/

More articles:


All Articles