Using CSS to modify the image source property through media queries

Currently working on an HTML5 application for Android, iPhone, and Windows phone. Utilizing media queries to showcase different image files based on screen width.

When displaying the image through the CSS background-image property, I can alter the image file by utilizing different CSS classes corresponding to the media query value. However, faced with limitations in changing the image when it is presented using the img tag.

Interested in finding out if there is a method to modify the image source linked with the img tag through CSS media queries?

csshtmlmedia-queries

Answer №1

One approach is to use a sprite sheet and adjust the background-position of a <div> or similar element (which can act as a replacement for an <img> on the webpage) in order to display a different section of the sprite based on specific media query conditions.

For example:

HTML:

<div></div>

CSS:

div
{
    width: 100px;
    height: 100px;
    background: url(http://martywallace.com/view/textures/photo/terraria.jpg) no-repeat;
}

@media all and (max-width: 1000px)
{
    div
    {
        background-position: -20px -50px;
    }
}

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

Navigating the Bootstrap layout resulted in encountering two scrollbars

My HTML code for a todo application is displaying two scrollbars, can anyone suggest the correct Bootstrap layout for my application? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div ...

htmlcsstwitter-bootstrapbootstrap-4

Using Angular to send all form data to the API endpoint

Please bear with me as I am new and may ask small or incorrect questions. <form > <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:< ...

htmlangularapi

Height not being generated by Div element

I am encountering an issue with a div element that contains an h2 and three nested div elements. Despite not explicitly setting a height for the container div, it is not expanding to accommodate the varying heights of the inner divs. This problem is causin ...

csshtmlheight

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Attempting to center two divs to start at the same point

I've been attempting to center align two divs and have them start at the same position using CSS. Below is the inline CSS code. The first div is named container and the second div is named descriptionarea. #container { width: 60%; ...

htmlcss

Retrieve JSON data generated within a JavaScript-powered webpage

My issue involves two HTML pages: 1) The first HTML Page (page1.html): <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script type="text/ ...

javascriptjqueryhtmlajaxjson

Position object in the middle using jQuery and CSS

Trying to center an absolutely positioned object horizontally using CSS and jQuery is proving to be a challenge. The use of jQuery is necessary due to the varying widths of the objects. Hover over the icons in my jsFiddle to see the issue. Check out the j ...

javascriptjqueryhtmlcss

"Step-by-Step Guide on Displaying Icons from One Folder to Another Page via a Link

I have a query regarding displaying icons (images). The icons are stored in the "img/icons" path. However, when I try to display them on a different page with the link "xxx/xxx/xxx/xxx", the icons do not show up. They only appear with the link "xxx/xxx" be ...

javascriptphphtmlcodeigniterbootstrap-4

When utilizing Nettuts' CSS navigation resource, the bottom shadow will disappear if the parent element contains child elements

I'm currently working on customizing a solution I stumbled upon on Nettuts to fit my specific requirements. Everything seems to be functioning well, except for a peculiar issue I'm encountering while hovering over a top-level navigation element t ...

javascriptcsshtml

Markdown in Vue.js filters

I found a helpful example by Evan You on how to convert HTML to markdown - check it out here. However, when trying to install the marked package via npm and implementing it, I encountered an error stating that 'marked' is not defined. After inc ...

htmlvue.jsmarkdownjavascript-marked

JTextPane Highlighting Issues: Offsets Not Aligned Properly

Working on a Text Editor project in Java that incorporates Syntax Highlighting with JTextPane. Upon running the program, encountering unexpected output at: The aim is to highlight all HTML tags in pink color, however, the highlighting seems to be inaccura ...

javahtmljtextpane

The mobile website always displays phone numbers in a crisp white color on the mobile

After creating a mobile version of my Wordpress website, especially for m.mysite.com, I noticed that while the mobile site displayed the correct color (#000) for the mobile number, the actual mobile device showed it in white. Here is the code I used: < ...

htmlcssmobilemobile-websitemobile-devices

The use of the CSS property overflow:hidden results in certain child components being hidden, even when moved back into the visible

At the top of my screen, I have a message box banner styled as follows (I'm using React + Material UI): style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start", textAlign: "left ...

javascripthtmlcssreactjscss-animations

My website doesn't seem to support Javascript, although it works perfectly on jsfiddle

I was tinkering around on jsfiddle and managed to get my code working flawlessly. However, when I tried to copy and paste it elsewhere, the functionality broke down. It seems that for some inexplicable reason, the code doesn't seem to pass through the ...

javascripthtml

Splitting two distinct dropdown menus in Bootstrap 4: A step-by-step guide

I recently came across a helpful tutorial on Bootstrap 4 by W3Schools (https://www.w3schools.com/bootstrap4/bootstrap_button_groups.asp) and was curious about how dropdown menus function. <div class="btn-group"> <button type="button" class="b ...

htmlbootstrap-4

Issue with CSS Media Queries: Preventing an Element From Being Affected

As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created this HTML code: * { margin: 0px; padding: 0; box-sizing: border-box; } p { font-size: 14px; font-family: 'Work Sans', 'sans seri ...

htmlcss

I am unable to make any changes to the CSS in the WordPress code that is already integrated

I have created a static web page to serve as my primary homepage. The page is built using HTML and CSS, with some PHP code pulled from My WordPress integrated into it. One of the functionalities I've added is to display the three most recent posts on ...

htmlcsswordpress

Missing Overlay in jQuery UI Dialog

I have integrated the jquery ui dialogue into my asp.net mvc application. I customized the styles related to ui dialogues by copying and modifying them. For the overlay, I used the following style: .ui-widget-overlay { background: #666666 url(im ...

jquerycssjquery-ui

implementing a properly aligned nested button group with Bootstrap 4 framework

My button group control looks like this. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" ...

cssbootstrap-4flexboxbuttongroup

I'm curious as to why my table header changes color when there is no CSS and I haven't styled the table in my HTML

Hey there, I need some help with my page setup: https://i.sstatic.net/EUsUC.png The section labeled "Detailansicht Telefonnummer" has a mysterious blue background that's not coming from the empty CSS file or Angular component. Any insights on where ...

htmlcssangularhtml-table