Css Background Image Is Not Showing

CSS background image is not showing. This is my html code:

Solution 1:

add some height to div it'll show

.b-g{
  background-image: url(https://pbs.twimg.com/profile_banners/1285511592/1470391779/1500x500);
  background-size: contain;
  background-repeat: no-repeat;
  height: 300px;
}

<divclass="container-fluid p-c b-g"><divclass="row"><divclass="col-sm-12 text-infom"></div></div></div>

Solution 2:

May be your keeping file path is wrong, check file loading or not by inspect in browser.

<styletype="text/css">.b-g {
   background-image: url("http://tipsforbeauties.com/gallery_gen//5c5f13b27a80afa16ca4184aec9a26c1_324.7619047619x220.jpg");
   width: 100%;
}
</style><divclass="b-g"></div>

Solution 3:

For fit image to background (element, body or whatelse):

.b-g {
    padding: 0px;
    background-image: url(../images/bg/trading.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

Or you can add background-size property (remove width property).

background-size: 100%100%;

And last one you can use like this:

background-image: #000url('../images/bg/trading.jpg') repeat center center;

Share