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

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.


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

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

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 class="col-8">
            Two of three columns

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.

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

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.

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

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">
            background-image: url('');
            min-height: 300px;
            background-size: cover;
          One of three columns
        <div class="col-8">Two of three columns</div>

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.