How to overlay a bootstrap grid on top of an image?

Question

So I have an image that I want to set as the background. On top of that image, I'd like to be able to use Bootstrap's grid. Here's the code I have so far:

HTML

<div class="container">

    <img src="..." alt="Background image">

    <div class="row">
        <div class="col">
            <!-- An image -->
        </div>
        <div class="col">
            <!-- Text -->
        </div>
        <div class="col">
            <!-- Text -->
        </div>
    </div>

    <div class="row">
            <!-- ... -->
    </div>

    <!-- More rows -->
</div>

CSS

.container{
    width: 100%;
}

.container img {
    object-fit: cover;
    width: 100%;
}

Edit:

I should mention that the only way I can access the image is in the HTML. I'm developing a Shopify theme, so to get the image I do:

<img src="{{ section.settings.image | img_url:'master' }}" alt="Background image">

So using

background-image: url(...);

doesn't work in my case as I don't know the path.

Does this answer your question? [How to set the background image of an DIV in CSS?](https://stackoverflow.com/questions/3905579/how-to-set-the-background-image-of-an-div-in-css) — Heretic Monkey, May 19 '20 at 17:14

score 1 · Answer 1 · answered May 20 '20 at 14:55

1

Or you can implement this style to the image.

{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   object-fit: cover;
   z-index: -1
}

answered May 20 '20 at 14:55

Derek Wang

10,098
4
18
39

score 0 · Answer 2 · answered May 19 '20 at 17:10

0

You could pass image as background image for the container.

.container {
  background-image: image;
}

answered May 19 '20 at 17:10

vishnu sandhireddy

1,148
1
7
12

How to overlay a bootstrap grid on top of an image?

HTML

CSS

Edit:

2 Answers2