How can I use a different size of image for the background image for the .img-fluid class in the following CSS code?

Question

The problem is that I am trying to use a different size of image for the background image in my CSS code but I am not sure how to do this.

I am using the following code as a reference:

/* css style */

/* Import font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');

/* Box-sizing */
*, ::after, ::before {
    box-sizing: border-box;
}

/* Default display for div */
div {
    display: block;
}

/* Body styles */
body {
    margin: 0;
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-xl);
    font-weight: var(--font-medium-weight);
    line-height: 1.5;
    background-color: var(--cream);
    text-align: left;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom properties */
:root {
    --dark-cyan: hsl(158, 36%, 37%);
    --cream: hsl(30, 38%, 92%);
    --dark-blue: hsl(212, 21%, 14%);
    --grayish-blue: hsl(228, 12%, 48%);
    --white: hsl(0, 0%, 100%);
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --popup-box-shadow: 0 3px 40px rgba(172, 185, 220, 0.4);
    --font-medium-weight: 500;
    --font-bold-weight: 700;
    --font-size-xl: 14px;
    --heading-h5-size: 32px;
    --default-border-radius: 4px;
    --font-family-fraunces: 'Fraunces', serif;
    --font-family-montserrat: 'Montserrat', sans-serif;
}

/* HTML styles */
html {
    font-family: var(--font-family-montserrat);
    line-height: 1.15;
    text-size-adjust: 100%;
}

/* Margin bottom classes */
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}

/* Card styles */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0.75rem;
}

/* Row styles */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Container styles */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    /* margin-top: 25%; margin-bottom: 25%; */
}

/* Column styles */
.col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Card image styles */
.rounded-left {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.img-fluid {
    width: auto;
    height: auto;
    vertical-align: middle;
    border-style: none;
    background-image: url('./images/image-product-desktop.jpg');
    background-size: cover;
    background-position: center;
}

/* Card body styles */
.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    color: var(--grayish-blue);
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-xl);
}

/* Paragraph styles */
p {
    margin-top: 0;
    margin-bottom: 0.8rem;
}

/* Card title styles */
.card-title {
    margin-bottom: 0.8rem;
    font-family: var(--font-family-fraunces);
    font-weight: var(--font-bold-weight);
    color: var(--dark-blue);
}

/* Heading styles */
.h5, h5 {
    font-size: var(--heading-h5-size);
}

.h3, h3 {
    font-size: 1.5rem;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
    font-weight: var(--font-bold-weight);
    line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Padding styles */
.pr-4 {
    padding-right: 1.5rem !important;
}


/* Card subtitle styles */
.card-subtitle {
    margin-top: -.375rem;
    padding-top: 10px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--grayish-blue);
    font-size: var(--font-medium-weight);
}

.card-text span.h3 {
    font-family: var(--font-family-fraunces);
    color: var(--dark-cyan);
}

.card-text span.strike {
    text-decoration: line-through;
    color: var(--grayish-blue);
    font-family: var(--font-family-montserrat);
}


[type=button]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

.btn-primary {
    color: var(--white);
    background-color: var(--dark-cyan);
}

button {
    overflow: visible;
    text-transform: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border-radius: 0;
    appearance: button;
}

.btn-primary:hover {
    color: var(--white);
    background-color: var(--dark-cyan);
    border: 1px solid var(--dark-cyan);
}

.btn {
    display: inline-block;
    font-weight: var(--font-bold-weight);
    border: 1px solid var(--dark-cyan);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    padding: 0.600rem 2.9rem;
    font-size: inherit;
    line-height: 1.5;
    border-radius: 0.5rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out;
}

img.icon {
    padding-right: 5px;
}

/***** End card button *****/

/* Media Queries */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    

}

@media (min-width: 768px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 580px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 580px;
    }
}

@media (max-width: 575.98px) {
    .col-md-6 {
        width: 100%;
    }
    
    .container {
        max-width: 340px;
    }

    .btn {
        padding: 0.600rem 5.5rem;
    }

    .h3,
    h3 {
        font-size: 2rem;
    }
}

@media (min-width: 576px) {
    .col-md-6 {
        width: 50%;
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Frontend Mentor | Product preview card component</title>
    <link rel="stylesheet" href="style.css" />
  
    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <div class="card container">
      <div class="row g-0">
        <div class="col-md-6 img-fluid rounded-left">
        </div>
        <div class="col-md-6">
          <div class="card-body">
            <p class="card-subtitle">Perfume</p>
            <h5 class="card-title">Gabrielle Essence Eau De Parfum</h5>
            <p class="card-text">
              A floral, solar and voluptuous interpretation composed by Olivier
              Polge, Perfumer-Creator for the House of CHANEL.
            </p>
            <p class="card-text">
              <span class="h3 pr-4">$149.99</span>
              <span class="strike">$169.99</span>
            </p>
            <div>
              <button class="btn btn-primary" href="#" role="button">
                <img
                    src="./images/icon-cart.svg"
                    alt=""
                    class="icon" />
                Add to Cart
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Joseph</a>.
    </div> -->
  </body>
</html>

In the given CSS code, the class "img-fluid" is being used to style the background image of a card component. The current CSS is using a fixed background image with the following code: background-image: url('./images/image-product-desktop.jpg');

expected result what i got I was expecting to use media queries to change the background image based on the screen size of the device. For example, using a different image for the background on smaller screens and another image for larger screens. This would allow for the image to be optimized for different screen sizes and improve the overall user experience.

Answer 1

So to answer your first question, you would probably want to define the size of a parent container that this img-fluid would be a child of. I believe the point of it being fluid, and the fact that margins are set to auto means that this image is meant to fill the container that it is placed in.

So you would need to define a new.css container with whatever dimensions you want.

.img-container {
width: 200;
height:200;
}

<div class="img-container">
    <div class="img-fluid"></div>
</div>

For your second question, media queries do in fact allow you to set a different image based on screen size. This would look something like this

@media all and (max-width: 1000px) {
.img-fluid {
    width: auto;
    height: auto;
    vertical-align: middle;
    border-style: none;
    background-image: url('./images/big-image.jpg');
    background-size: cover;
    background-position: center;
}
}

@media all and (max-width: 300px) {
.img-fluid {
    width: auto;
    height: auto;
    vertical-align: middle;
    border-style: none;
    background-image: url('./images/small-image.jpg'); //Image file changes
    background-size: cover;
    background-position: center;
}
}

EDIT: 1000px instead of 100 typo