Is there a way for me to have a background image behave like an img element with img-fluid class as shown in the

Showing 2 rows
The issue lies with the first row, as it is not displaying properly and does not resize responsively like the second row. I have tried everything but nothing seems to work.
I am attempting to do this because the text and elements in the picture do not stay in the same position when resized. Image size is 420px width, 466px height; view board

   <head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253a253b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">      <!-- BOOTSTRAP 5.1 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddcc91d5dfd3d2cffc8d9289928c">[email protected]</a>/font/bootstrap-icons.css">  <!-- BOOTSTRAP Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">                    <!-- font-awesome icon -->
   </head>
   
   <div class="container-fluid">
        <div class="ms-4 me-4 mt-3">
            <div class="row">
                
                <div style="position: relative; background-image: url('/images/Board 1.png'); background-size: cover; background-position: center center;height: 100%;" class="col-md-3">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>
                    <span class="top-right">New</span> 
                    <!--product description -->
                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
                <div style="position: relative; background-image: url('/images/Board 1.png'); background-size: cover; background-position: center center;" class="col-md-3">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>
                    <span class="top-right">New</span> 
                    <!--product description -->
                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
                <div style="position: relative; background-image: url('/images/Board 1.png'); background-size: cover; background-position: center center;" class="col-md-3">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>
                    <span class="top-right">New</span> 
                    <!--product description -->
                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
                <div style="position: relative; background-image: url('/images/Board 1.png'); background-size: cover; background-position: center center;" class="col-md-3">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>
                    <span class="top-right">New</span> 
                    <!--product description -->
                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
                
            </div>
            <div class="mt-5"></div>
            <div class="row">
                <div style="position: relative;" class="col-md-3">
                    <img  class="img-fluid" src="/images/Board 5.png" alt="">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>

                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
                <div style="position: relative;" class="col-md-3">
                    <img  class="img-fluid" src="/images/Board 6.png" alt="">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>

                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
                <div style="position: relative;" class="col-md-3">
                    <img  class="img-fluid" src="/images/Board 7.png" alt="">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>

                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
                <div style="position: relative;" class="col-md-3">
                    <img  class="img-fluid" src="/images/Board 8.png" alt="">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>

                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                    
                </div>
            </div>
        </div>
    </div>

htmlcssbootstrap-5

Answer №1

Without specifying the size of the containing div, achieving this task can be quite challenging. I typically set the padding-top to the desired image size and define the width to determine the box's dimensions. Then, I utilize media queries to adjust the box sizes at specific breakpoints and employ background-size: contain instead of cover.

.product-container {
  position: relative; 
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 315px; /* sum of image width, height, and padding */
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
<div class="container-fluid">
    <div class="ms-4 me-4 mt-3">
        <div class="row">
            <div class="col-md-3">
                <div class="product-container" style="background-image: url('https://via.placeholder.com/300/300');">
                    <span class="top-left text-dark"><i class="far fa-heart"></i></span>
                    <span class="top-right">New</span> 
                    <!--product description -->
                    <div class="">BILLABONG</div>
                    <div class="font-weight-bold">Deep Ocean Surfing Board</div>
                </div>
            </div>
        </div>
    </div>
</div>

In my opinion, sticking with <img> allows for easier resizing without the need for multiple media queries.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Jquery to select a specific id for an input element that is a checkbox

I've been working on a snippet of jQuery code that I'd like to tailor to be more specific for one of two different input elements on my HTML page. <script> // ensure only one box is checked at a time $(document).ready(function() { ...

javascripthtmljquerycssinput

Tips for stopping an image from stretching the cell in flexbox using CSS

When using Flexbox to style elements, the width of the parent should be determined by the text inside child1. The image inside child2 should grow proportionately as the parent grows. However, it is important to ensure that the parent div does not exceed it ...

htmlcssflexboxgrid

Anticipating that the input in the search bar will be displayed on the search results page

Main Code in views.py from weatherbot.models import Question from django.template import RequestContext from django.shortcuts import render_to_response def search(request): query = request.GET.get('q') if query: ...

pythonhtmldjango

Is it possible to swap the src of the Next.Js Image Component dynamically and incorporate animations in the

Is there a way to change the src of an image in Nextjs by using state and add animations like fadein and fadeout? I currently have it set up to change the image source when hovering over it. const [logoSrc, setLogoSrc] = useState("/logo.png"); <Image ...

javascriptcssreactjsnext.js

What is the method for adding a before pseudo-element to my button element?

HTML & CSS Issue <button>Get Postion</button> Below is the CSS code for styling a button: button { padding: 1rem; background-color: red; color: wheat; border: 4px solid yellowgreen; position: relative; cursor: pointer; ...

htmlcssz-index

Implement a full-width dropdown menu with Bootstrap 4

Hey guys, I'm having a real head-scratcher here. I've created a dropdown menu using Bootstrap 4, but I'm having trouble making it responsive for mobile screens. I've tried using media queries to make the dropdown menu occupy 100% width ...

htmlcssbootstrap-4angular9

Nightwatch failing to locate element within iFrame

I'm currently facing a challenge when trying to access an element within an iframe. Despite successfully switching to the frame, Nightwatch keeps returning "element not found" whenever I attempt to verify its presence or visibility. Below is a snippe ...

javascriptcssiframenightwatch.js

Is there a way to prevent this JavaScript code from deleting the initial row of my table?

Looking at the code provided, it's evident that creating and deleting new rows is a straightforward process. However, there seems to be an issue where the default/origin/first row (A-T) gets deleted along with the rest of the rows. The main requiremen ...

javascripthtml

Bootstrap component malfunctioning and not performing as expected

Currently, I am learning how to use Bootstrap and attempting to replicate the example themes found on their official website. The specific theme I am focusing on is available at this link: https://getbootstrap.com/docs/4.3/examples/pricing/ Unfortunately, ...

htmlcsstwitter-bootstrap

Verifying the "select" dropdown option prior to final submission

My website features multiple select dropdowns that require validation before submission. For instance, there may be a situation where seven select dropdowns are present as described below. My desired validation criteria is: If there are 5 or more "sel ...

javascriptphpjqueryhtml

Tips for retrieving the count from HTML using JavaScript:

I need to determine the count of list items in an unordered list within dir-pagination-controls. How can I achieve this using JavaScript? <dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate- ...

javascriptjqueryhtmlangularjs

Exploring JQuery Mobile: A guide on looping through elements in a list and collecting their unique identifiers

I am facing a challenge with a list of li tags within an unordered list. Each tag is assigned a class=listitem and a data-clicked=true/false. My task is to extract only the id's of those with data-clicked=true, add them to a string named custidlist, a ...

javascriptjqueryhtmljquery-mobile

JS filter function is not functioning as expected. It's unclear what the issue might be

Check out my previous inquiry What could be the issue with my filter? I've implemented a filter, but it seems to have some glitches when dealing with specific values. The 'No Record Found' message doesn't appear as expected in certain ...

javascriptjqueryhtml

Enhance your HTML code using JavaScript (specifically jQuery)

Is there a way for me to transform the following code into a more visually appealing format? <td> <a href="/Test/Page/2">Previous</a> <a href="/Test/Page/1">1</a> <a href="/Test/Page/2">2</a> 3 ...

jqueryhtmldomrazor

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

javascriptcssreactjsmaterial-ui

When the mouse hovers over, alter the background color with React

Currently attempting to adjust the background color of a Grid section when the mouse enters. I've made some progress, but now I seem to be stuck. My current approach involves calling a function to update the background color on mouse enter. const [isS ...

htmlcssreactjshover

What are the benefits of incorporating CSS into a CSS block rather than utilizing inline output with HtmlHelper in CakePHP?

Just a few days ago, I embarked on the journey of learning CakePHP through their blog tutorial. Now, I am diving into writing my own small project to gain hands-on experience with the framework. After going through their documentation, I discovered two ...

phphtmlcsscakephp

Transform the contents of a div tag into a function by removing the entire div tag

My goal is to find a clever solution for removing the contents between specific HTML classes using PHP. For example, I want to erase all the HTML within the "sometestclass" class. The function below is somewhat functional but not perfect. It eliminates so ...

phpfunctionhtml

Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario. .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } <link rel="style ...

htmlcssbootstrap-4

Setting the minimum and maximum width of the MenuItem (popover) in Material-UI based on the width of the select component

I need the popover width to always match the width of the select component, regardless of the length of the text in the menu items. Setting autoWidth to either true or false is not providing a solution. Below is the code for the select component: import ...

cssreactjswidthmaterial-uihtml-select