Background image using bootstrap

Asked

Viewed 727 times

0

I have a simple problem, but it’s the first time I’ve come across such a problem. Using the bootstrap on a page, I couldn’t put a background image. The page does not recognize the following command in my css file:

background-image: url(img/ok.jpg);

I can even change the color using the following class in html: class="bg-dark, bg-light, bg-danger".

Where am I wrong or what I haven’t learned about it? I appreciate it if you can help, as it is the work of the faculty and should be delivered. Thank you.

html5 css3 bootstrap-4
  • 1

    Create a [MCVE] that replicates the error so we can analyze what is happening.

1 answer

1

The bootstrap is nothing more than a library with multiple classes, so when you use bg-dark, bg-light or bg-danger your element has changed background. Your problem does not seem to be with the library itself, but rather with linking your css class with your html.

Check the example below, where the class is created myBackground who owns the property background-image responsible for setting a background image.

Just pass in your element the class you created and then, the background this element will be amended:

.myBackground {
     background-image: url(https://i.imgflip.com/2/34c2k2.jpg);
     color: white
}
<!DOCTYPE html>
<html>
<body>

<div class="myBackground">Essa div deve possuir um background-image com base na minha classe definida no css!</div>

</body>
</html>

One of the possible reasons why your background may not be being applied is that it was not possible to find the file you passed as parameter for the url(), check if the specified path actually exists and has the image in question.

Note that this question has been answered several times and is easily found on the site, for example, here and here

  • I managed to fix it. The problem really was between html and css stylesheet. More specifically the directory. Thank you. I help a lot.

Browser other questions tagged html5 css3 bootstrap-4

You are not signed in. Login or sign up in order to post.