Varying hero background images for desktop and mobile users

My website features a hero section with a background image and a title. The image size is 1920x500px.

https://i.sstatic.net/4zUY2.jpg

<section class="bgimage d-flex align-items-center " style="background-image:linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5)),url(https://mikulas.web87.hu/images/site_background/7304-1.jpg)">
  <div class="container">
    <div class="row">
      <div class="col text-center">
        <h1 class="bgimage_title text-white">Rendelés menete</h1>
        <!--<p class="bgimage_text text-white"></p>-->
      </div>
    </div>
  </div>
</section>

Although everything looks good on a full hd monitor, the image doesn't display well on small devices like mobiles. Therefore, I am considering changing the image for better compatibility.

Feel free to visit my page for reference: 

<ul class="bxslider"><li>
                            <picture>
                              <source media="(max-width: 991px)" srcset="https://mikulas.web87.hu/images/homepage_slideshow/18-1.jpg" />
                              <source media="(min-width: 992px)" srcset="https://mikulas.web87.hu/images/homepage_slideshow/300-1.jpg" />
                              <img src="https://mikulas.web87.hu/images/homepage_slideshow/300-1.jpg" alt="" />
                            </picture>
                         </li></ul>

I have searched for sample codes but couldn't find any that provided different images for comparison.

htmlcssbootstrap-4responsive-design

Answer №1

I comprehend the concept you are attempting to convey. In order to display a different image based on the device size of the user visiting your website, I suggest utilizing the srcset attribute within the img element. Below is an example code snippet:

/* CSS Styling for Section */
section {
    position: relative;
    width: 100%;
    height: 200px;
}

/* Overlay Effect with pseudo-class */
section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5));
}

/* Image Display Properties */
img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content Placement above Image */
.container {
    position: relative;
    z-index: 1;
}
<section class="bgimage d-flex align-items-center">
    <img
        src="https://placehold.co/3200x800.png"
        srcset="
            https://placehold.co/800x200.png   800w,
            https://placehold.co/1600x400.png 1600w,
            https://placehold.co/3200x800.png 3200w
        "
    />
    <!-- Specify URLs for different screen sizes -->

    <div class="container">
        <div class="row">
            <div class="col text-center">
                <h1 class="bgimage_title text-white">Order Process</h1>
            </div>
        </div>
    </div>
</section>

Key Points to Remember:

  • If a larger image has already been loaded in the browser cache, resizing the window will not switch back to a smaller image until a hard refresh (Ctrl + F5) is performed.
  • To view the smaller image, clearing the browser's cache through a hard reload is necessary.
  • User's screen size is fixed and won't cause any issues if they initially open the site on a small screen.

For a detailed explanation on how srcset functions, I recommend reading this blog which served as a reference for addressing your query.

Blog Link and Credit:

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

What is the method for embedding HTML content into the header section of tcpdf?

I am currently utilizing the tcpdf library to create a PDF document. I have implemented the smarty template engine to manage the data. Below is the code snippet for inserting header data: // set default header data $pdf->SetHeaderData(PDF_HEADER_LOGO, ...

phphtmlsmartytcpdf

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...

javascripthtmlcss

How to shift an image to the right side of the navbar

Is it possible to change the position of an image within a navbar from left to right? I have tried using the float property but it doesn't seem to work. .logo-img{ float: right; margin: 0px 15px 15px 0px; } <a class="navbar-brand logo-img" ...

javascriptcssnavbarbootstrap-5nav

Discovering which templates are making call to the base in Django

Is there a way to determine which template is calling the base.html file in order to display one div over another? Alternatively, can a parameter be passed from home.html to base.html when using {% extends '/parts/base.html' %} to specify which d ...

htmldjangodjango-templates

Struggling to activate the upload dialog feature

Currently in the process of developing a straightforward website, and I've come across this issue: <form action="upload.php" method="post"> <input type="file" name="image" accept="image/*"> <input type="submit"> </form> Altho ...

androidhtmlformsbrowserupload

What is the reason the .clearfix class fails to properly clear a floated element?

Check out this post: Understanding clearfix The most helpful response indicates that the clearfix should be applied directly to the last floating element: To incorporate a clearfix, you simply need to include HTML code: <div class="clearfix"> ...

htmlcssfloatingclearfix

Selecting elements using XPath

My goal is to target an i element using the following XPath: //div[contains(text(), "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32565356564153565341725e5d5d1c515d5f">[email protected]</a>")]//parent//i[contains(@c ...

htmlseleniumxpathselenium-webdriver

Using static typing in Visual Studio for Angular HTML

Is there a tool that can validate HTML and provide intellisense similar to TypeScript? I'm looking for something that can detect errors when using non-existent directives or undeclared scope properties, similar to how TypeScript handles compilation er ...

htmlangularjsvisual-studiotypescript

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...

htmlcsslaraveltwitter-bootstrap

What steps can be taken to identify the referrer of external links when the target attribute is set to "_blank"?

Can't seem to capture the Referrer with PHP: $_SERVER['HTTP_REFERER']; Whenever visitors land on mywebsite.com from external-web-site.com via a link with target="_blank", for example: ... <a href="http://mywebsite.com" target ...

phpjavascripthtmlscripting

Struggling to eliminate buttons upon clicking, but they persistently reappear (JavaScript, HTML)

I have encountered an issue with buttons in my table that I am struggling to resolve. Each row in the table contains a "Pack" action button, which when clicked, is removed to prevent accidental double-packing of items. Everything was functioning smoothly ...

javascriptjqueryhtmluser-interface

When buttons are clicked within Angular Material's Card component, it automatically triggers the click event of the card itself

One of the challenges I'm facing is having a mat-card within a component template: <mat-card *ngFor="let p of products" (click)="viewProduct(p)"> <mat-card-actions> <button mat-stroked-button (click)="addProductToCart(p)"&g ...

htmlangulartypescriptangular-material

Central alignment of div with cursor

I'm experimenting with creating a unique custom cursor using a <div> that trails the movement of the mouse pointer. While the current setup works smoothly, I've noticed that when scrolling down the page, the div lags behind until the scrol ...

javascriptjquerycsscursor

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...

javascripthtmlreactjsgoogle-maps-api-3

The primary tab's background color in a Shiny app

I had this question deleted previously while I was in the process of refining it. Is there a way to customize the background color of the active tab in a Shiny app? library(shiny) ui <- fluidPage( tags$head( tags$style(HTML(css)) ), tabsetP ...

htmlcssrshiny

What causes the disparity between Chrome's print preview and printed output? [HTML - CSS]

In my Angular demo project, I have included basic text and a table. There is a print button that calls window.print() to print the page with applied styling. printPage() { window.print(); } CSS: @media print { @page { size: landscap ...

javascripthtmlcssangularprinting

Animating a spinning SVG path around its center within a larger rectangular box

Is there a way to rotate a smaller SVG path within a larger rectangle around its own center? The current code rotates the entire space. <animateTransform attributeType="xml" attributeName="transform" type="rotat ...

csssvg

Using JavaScript and jQuery to create a delay when handling input events

I am working on a project where I have an HTML table that retrieves its values from a database using jQuery Ajax. Here is an example: <div id="tableId"></div> Below is the JavaScript code: function showUser(rowsToShow) { request = $.get("s ...

javascriptjqueryhtmlajax

Adjusting the dimension of input elements using CSS

Is it possible to change the width of an input without using HTML? I had set the size to "35" and it looked fine on the site (check here at the bottom of the site) until I started working on the mobile version. Now, with a size of 35, it appears very wide ...

htmlcssformsinput

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

javascriptjqueryhtmlcss