what is the best way to change background image in media query for various screen sizes?

I have a customized email template with a background image. The size of the image is 600px (width), and I have applied a class called back-img for styling purposes. I am looking to override this class specifically for all mobile screen sizes, including landscape and portrait orientations, especially on newer iPhones. Can anyone guide me on how to achieve this?

Responsive Design Solution

<style>

    @media only screen and (min-device-width: 414px)and (max-device-width: 550px) {
        .back-img  {    
            background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            height: 450px !important;
        }
    }

    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
        .back-img  {    
            background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            height: 375px !important;
        }
    }

    @media screen and (min-device-width: 320px) and (max-device-width: 374px) {
        .back-img  {    
            background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            height: 320px !important;
        }
    }
    
</style>

Download the HTML file from the link below

Click here to access the file

htmlcssresponsive-designmedia-queries

Answer №1

Ensure to include a closing curly bracket at the end of each media query. Adding a } will help resolve the issue.

<style>

    @media only screen and (min-device-width: 414px)and (max-device-width: 550px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 450px !important;
}}
    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 375px !important;
}}

    @media screen and (min-device-width: 320px) and (max-device-width: 374px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 320px !important;
}}
</style>

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

keeping variables hidden from the user until a certain action is taken

In my project, I am working with three main code classes: 1) node.js (utilizing express framework) 2) index.html (serving as the home page when users visit the site) 3) sck.js which performs a specific function (details to follow on the first and second fi ...

javascripthtmlnode.js

Using CSS to disable an image map in conjunction with dynamically adjusting CSS styling

On the desktop version of the website, there is an imagemap implemented. However, when the site transitions into tablet or mobile view, the imagemap should be disabled to allow for a simpler navigation area to be displayed. I attempted to use the following ...

htmlcssdynamicimagemap

Exploring the world of interactive storytelling through a basic PHP text adventure

I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...

phphtmlfunction

Is there a way to submit a basic HTML form using R?

As a newcomer to R programming, I am excited to apply what I am learning in the Johns Hopkins Data Science track to practical use. My current goal is to automate the process of downloading historical bond prices from the US Treasury website After explorin ...

htmlrpostrcurlrvest

Techniques and Strategies for showcasing several images in close proximity

I am looking to arrange dummy images in a row next to each other, similar to the example shown here: https://i.sstatic.net/HUUGz.png Since my CSS skills are not very strong, I am seeking guidance on the proper way to achieve this. The images I have are a ...

cssbootstrap-4frontend

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

htmlcssbootstrap-5

Learn how to trigger an animation when hovering over an element, and how to pause it once the hover is

I am facing an issue with a button that I want to rotate upon mouse hover. The problem is, the rotation works perfectly when the mouse enters, but it continues spinning even after the mouse leaves. Here's the code snippet for better understanding: ...

csscss-animations

Identify the quantity of dynamically added <li> elements within the <ul> using jQuery

I'm facing an issue where I need to dynamically add a list of LI items to a UL using jQuery. However, when I try to alert the number of LI elements in this list, it only shows 0. I suspect that it's because the code is trying to count the origina ...

javascriptjqueryhtml

Tips for choosing multiple files with the Ctrl key in a list item element:

We have decided to create our own browsing functionality due to the limitations of the existing HTML browse feature. While using the HTML browse, we can only select multiple files by pressing the Ctrl key, and we want to replicate this feature in our custo ...

javascripthtmlangularjs

What steps can I take to add a horizontal scroll bar and view the entirety of my image?

<img src="the fake.png" width="3268" height="538" class="table" alt=""/> I have a large image that is getting cut off on the page. I need to add a horizontal scrollbar so I can view the entire image ...

phphtmlcssweb

Effortlessly connecting Angular with forms

Check out this jsfiddle demo: https://jsfiddle.net/zpufky7u/1/ All the forms on my site were functioning correctly until suddenly angular started binding them all with class="ng-pristine ng-valid" Could this be due to a setting or something else causing ...

htmlangularjsformsangularjs-scope

Is it possible to monitor the progress of an order placed via my website as a Flipkart affiliate?

As an affiliate for flipkart, I promote their products on my website. I am interested in being able to track the orders and purchases made by users who are redirected to flipkart from my site. Is it possible for us to obtain the order/purchase id for thos ...

javascripthtmlaffiliateflipkart-apiaffiliates

Creating Seamless, Unified Shape-to-Shape (Containers) Transition with CSS and JavaScript - A Step-by-Step Guide

I am experimenting with creating a unique effect where two rectangular shapes, each containing text and with rounded ends, move towards each other, merge to form a single rounded rectangle as the page is scrolled down, and then separate back when scrolling ...

javascripthtmlcssanimationcss-animations

Is it possible to use HTML code as content in CSS?

How do I go about displaying the variable $text as HTML? Take a look at the code snippet provided below: <?php header('Content-type: text/css'); $background = "#ffafff"; $color = "#000000"; $green = "#16a86f"; $text= '<h1&g ...

phphtmlcss

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap. Desired Layout Structure: Row1: Consists of a fixed header 64px in heigh ...

javascripthtmlcssflexbox

How Jquery Can Be Used to Dynamically Add Extra Rows in HTML Without Submitting Data via POST Requests

When using jQuery to dynamically add extra rows to an HTML table, I encountered an issue where the fields of the extra rows were missing in the $_POST array when submitting the form. Can you please review the code and provide a solution to fix this problem ...

jqueryhtmlajax

Is it possible to apply a CSS Transition to just one specific type of transform?

Can you animate just one type of css transform using transitions? My css looks like this: cell{ transform: scale(2) translate(100px, 200px); transition: All 0.25s; } Now I only want to animate the scale property. I could use position:absolute with ...

csstransformtransition

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

Applying binary information to an image

Let's say I have an <img/>. The img is initially set with src='http://somelocation/getmypic'. Later on, there might be a need to change the content of the image based on some ajax call that returns binary data. However, this decision c ...

javascripthtmlajaxasp.net-mvcimage

What is the most strategic way to conceal this overlay element?

Currently, the website I'm developing features a series of navigation elements at the top such as "Products" and "Company." Upon hovering over the Products link, an overlay displays a list of products with clickable links. Positioned at the top of the ...

javascriptjqueryhtml