Problem with CSS background

Question

Problem with CSS background

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I have a problem, I'm trying to insert a background image using the background-image property, I did it in the following way:

<div class="container-fluid bg-img"></div>

and CSS

.bg-img {
    width: 100%;
    height: 100%;
     background-image: url("../img/primary.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-color: gray;
}

But nothing appears, when I put a word inside the div that contains the class because a bottom line appears, as if it were not taking the width and the height. What I can do? Thank you very much!

html css

asked by Patricio Moracho 29.08.2017 в 21:19

source

4 answers

Extract data from an xml file in c # Redirection after login in REACT JS

score 1 · Answer 1

To the div you have to assign height and width

.bg-img {
  background-image: url("img/03.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}

div {
  height: 400px;
  width: 400px;
}

<div class="container-fluid bg-img"></div>

score 0 · Answer 2

I hope it serves you, now if what you are looking for is to have a background color and an image at the same time you are getting it wrong; but if you need more help you tell me and I can help you.

.padre {
  height: 150px;
  width: 100%;
}

.bg-img {
  width: 100%;
  height: 100%;
  background-image: url("../img/primary.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}

.bg-img2 {
  width: 100%;
  height: 150px;
  background-image: url("../img/primary.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}

<strong> Dos divs </strong>
<div class="padre">
  <div class="bg-img"></div>
<div>

<strong> En un solo div </strong>

<div class="bg-img2"></div>

score 0 · Answer 3

The problem you have is because you assign a background image to a container without a certain height (remember that the measure height: 100%; takes you the total height of the father). With changing height for a measure in pixels you should run without problems.

.bg-img {
  width: 100%;
  height: 400px ; /* Antes 100%; */
  background-image: url("../img/primary.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: gray;
}

PS: Remember also that background prioritizes the image before the color, so the gray background should only come out if you have bad image URL.

score 0 · Answer 4

In case of having the father with an official fixed height, in this case he lacks a fixed height to show the background. :)

    .bg-img {
        width: 100%;
        height: 200px;
        background-image: url("../img/primary.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: gray;
     }

link