Bootstrap. How can I set background image (or just image)

1

I am trying to set a div background image, but none of the code I try is even generating the photo.

I am tying it with this code:
<div class="col-4" style="background-image: url('static/beach.jpg');">

but it doesn’t display the image

None of the other code I have tried work either. The photo is definitely in the static folder in the same directory.

Thanks

2

can you send the whole code? and check if the path to the image and it’s name is right. there may be problem with a size of an image so i would recommend to try messing with stuff like background-repeat: no-repeat and background-size

3

can try add size to picture hope can help not want give all answer but can be things like view height view window can place code after image inline style=" img water here; size here; " thank you take care gn gm fren hope can fix the code

4

Here’s the whole code

<div class='container mt-4 mb-4' style='height: 300px;'>

    <div class='row'>
        <div class="col-4" style="background-image: url('static/beach.jpg');">
            One of three columns
          </div>
          <div class="col-8">
            Two of three columns
          </div>
        </div>
    </div>

With some derivations of the code it seems the image is getting on the screen but now showing. I’m guessing there’s an issue with the size settings.

5

try using background-size: contain; that way it will fit the whole image within the div or background-size: cover; it should stretch the image so it fits to the div’s size and if you are setting the background image it is set as deafault to repeat itself so i recommend to set the backgroun-repeat: no-repeat; so it won’t be repeating

6

Thanks. Still not working. Getting a tad annoying. It I put it in an <img>, it seems to be coming on the screen, but it’s not displaying.

7

Honestly I don t know how i can help you but I think you should try to create a css file and use class selectors to write the styles it would make it much cleaner, easier to read and find out problems and about sizing background image i recommend you to watch this video

8

Making the container 300px isn’t going to make the row/column that height. You have to size the image.

    <div class="container mt-4 mb-4">
      <div class="row">
        <div
          class="col-4"
          style="
            background-image: url('https://images.unsplash.com/photo-1532517891316-72a08e5c03a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80');
            min-height: 300px;
            background-size: cover;
          "
        >
          One of three columns
        </div>
        <div class="col-8">Two of three columns</div>
      </div>
    </div>

But I agree, you should avoid inline styles. Give the element a class and add the styles to a CSS file.