Shopify Question posted in
The Shopify help center can be found here.

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

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.

Tags:

2

Answers


  1. 0

    You could pass image as background image for the container.

    .container {
  background-image: image;
}
    Login or Signup to reply.
  2. 0

    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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search