Modifying the URL of an image based on screen size with the @media property

Currently working on developing a responsive webpage. An interesting challenge is presenting two distinct images for the desktop and mobile views. Attempted to switch between images by utilizing the @media feature within CSS, as shown below.

 #login-top-shadow{
         max-width: 100%;
         @media only all and (max-width: 700px) {
         content:url("img/login_top_shadow_mobile.png");
   }
}

The image designated for display in the desktop view has been set as the src attribute of my image tag.

Despite my efforts, when resizing the page, the image fails to reflect the change. It seems that modifications are successful in the CSS styles in the console, but they do not translate to the html document.

Is this method considered appropriate for handling images in the context of responsive web design? Attached is a screenshot of my console for reference.https://i.stack.imgur.com/QmoSW.png

htmlcssimageuser-interfaceresponsive-design

Answer №1

One idea is to create a div element and then assign a background image to it.

Link to example

<div></div>

    div {
    background-image: url('http://images.clipartpanda.com/clipart-sun-decorative_sun_clip_art_23259.jpg');
    height: 400px;
    width: 400px;
    background-size: cover;
}

@media screen and (min-width: 480px) {
    div {
        background-image: url('https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1');
    }
}

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

Maintain the selected list item after filtering in AngularJS

I am facing an issue with highlighting selected items in a list. I have three first names: Roy, Sam, David displayed in a ul as list items. Initially, I can toggle each li on click just fine. However, after performing a search and returning to the list, th ...

jquerycssangularjs

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

phphtmlcss

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

Implementing JavaScript for showcasing weights

I've encountered a JavaScript function that modifies user preferences for weight units, allowing them to choose between metric and imperial measurements. When displaying weights on my page, I typically present them as follows: This is a brief explan ...

javascriptjqueryhtml

Showcase three elements next to each other on the same row (Photo Gallery, Description, and Contact Form)

I am attempting to showcase three divs in a single line while working on a Subtheme for the Drupal 8 Bootstrap Theme. These particular divs are fields nested within a view known as viewproducts. The divs include: Juicebox Photo Gallery; ...

csswebformsbootstrap-4drupal-8drupal-views

The issue of footer overlapping the login form is observed on iOS devices while using Safari and Chrome

Unique ImageI am currently working on an Angular 8 project with Angular Material. I have successfully designed a fully functional login page. However, I am encountering a problem specifically on iOS devices such as iPhones and iPads, whether it is Safari o ...

cssangulartypescriptangular-material

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

Scroll-triggered Autoplay for YouTube Videos using JQuery

Issue: I'm trying to implement a feature where a YouTube video starts playing automatically when the user scrolls to it, and stops when the user scrolls past it. Challenges Faced: I am new to JavaScript web development. Solution Attempted: I referre ...

javascriptjqueryhtmlyoutube

Tips for effectively managing JSON data in my application

I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...

htmljson

What is the smoothest way to animate price changes as you scroll?

After searching online, I could only find a version for swift. The only keyword that resulted in a search was ScrollCounter. Is it possible to create this type of animation using CSS and HTML? If anyone knows of a helpful resource or example, please share ...

htmlcsscss-animations

Selenium alert: element click blocked: Another element is in the way of receiving the click

I'm currently using Selenium in an attempt to click on the "show more" option under the "about this show" section on the following URL: https://www.bandsintown.com/e/1024477910-hot-8-brass-band-at-the-howlin'-wolf?came_from=253&utm_medium=we ...

pythonhtmlseleniumgoogle-chromeselenium-chromedriver

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve. The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this v ...

cssasp.netviewsrcshared

Each Browser Approaches Simple Search Fields in its Own Unique Way

In the process of creating a search field with an input field and an svg icon, I encountered different browser behaviors in Chrome, Firefox, and IE11. Chrome – the preferred version Firefox IE11 (confusing) Check out the working demo of the code on c ...

htmlcsssvgcross-browser

Looking to increase the resolution of a 512x512 heightmap array of pixels in a png image to 2017x2017 using JavaScript for implementation as a heightmap in Unreal Engine 4?

I have a task of converting a 512 x 512 32-bit RGB PNG image with encoded height values into a 16-bit grayscale PNG representing height values for a height map. Below is the code used for this conversion: The image conversion process utilizes image-js li ...

javascriptimagemapbox-gl-jsunreal-engine4heightmap

Manipulate the lines in an HTML map and showcase the distinctions between them

I've been searching through various inquiries on this particular subject, but none have provided me with a satisfactory response. I have created a map where I've set up 4 axes using the following code: function axis() { var bounds = ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Using CSS :active can prevent the click event from firing

I've designed a navigation menu that triggers a jquery dialog box to open when a link is clicked. My CSS styling for the links includes: .navigationLinkButton:active { background:rgb(200,200,200); } To attach the dialog box, I simply use: $("#l ...

jquerycsseventsjquery-ui

Revamp selected bootstrap attribute

Imagine a scenario where there is: @media (min-width: 576px) { #projects-edit-middle-column .equal-columns-wrapper .equal-columns { width: 50%; padding-right: 25px; } } This is being utilized within a container: <div class="equal-columns ...

csstwitter-bootstrap

Navigate files on a Windows server remotely using a Linux Apache web server by clicking on a browser link

After setting up an apache webserver on Linux Debian and successfully creating an intranet, I encountered a challenge. The intranet is designed to display tables with data from sql queries using php and mysql. However, I wanted to include a hyperlink withi ...

phphtmlapache

"What is the best way to eliminate duplicate data from an ng-repeat loop in AngularJS

I have a query regarding appending data from the second table into $scope.notiData in AngularJS. Additionally, I need to figure out how to remove ng-repeat data when the user clicks on the remove symbol X. I have attempted some code but it is not functioni ...

javascripthtmlangularjs

Complete the execution of the jQuery function

It may seem like a simple idea - to stop executing a function, just use return false, return, or call on a function like undefined. However, in this case, it's not that straightforward. I'm working on a website project that includes a snake game ...

jqueryhtml