Utilizing background images in conjunction with media queries

I have a div

<div id="page">

</div>

Containing the following css code:

#page {
    background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
    #page {      
        background: url('images/white-zigzag-mobile.png') repeat-x;
    }
}

Upon resizing my browser, I observed that the "mobile" background is displayed correctly. However, when enlarging the browser again, the original "large" background does not always reappear as expected.

This intermittent issue has occurred frequently enough for me to consider addressing it. Are there any solutions to prevent the problem of background images not appearing or a method to resize background images so they adjust according to the new size specified in the media query? As far as I am aware, changing the size of a background image is not widely supported...

cssmedia-queries

Answer №1

As per the findings from this experiment:

To ensure that only the desktop version of the image is downloaded on desktop devices...

and only the mobile image is downloaded on mobile devices -

You should utilize a min-width declaration to set a minimum browser width for the desktop image...

as well as a max-width for the mobile image.

Therefore, your code should look something like this:

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

Answer №2

Your provided code appears to have a small bug that we can address. Here's the current snippet you shared:

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}

It seems the media query section is incomplete. You need to specify the CSS selector used outside of the query like this:

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

Give that a try and let me know if it resolves the issue.

Answer №3

Kindly utilize the following CSS media query for screen widths between 320px and 580px:

@media screen and (min-width: 320px) and (max-width:580px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x
  }
}

Answer №4

 <div style="width: 100%; height:100%;" class="bg"></div>

.bg{
    background-image:url("ocean.jpg");
    background-repeat: no-repeat;
    background-size:cover !important;
    background-position: center;
    overflow: hidden;
}
@media(max-width:900px){
    .bg{
        background-image:url("sunset.jpg") !important;
        background-repeat: no-repeat;
        background-size:cover !important;
        background-position: center;
        overflow: hidden;
    }
    }

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

Verify if the value of localStorage matches the specified value, then conceal the element

This is my second query and I'm hoping it covers everything. My knowledge of javascript is limited, which has made it difficult for me to get my code working properly. Despite trying various different approaches, I have been unable to resolve the issu ...

javascriptjqueryhtmlcss

Modify the attributes of a CSS class according to the chosen theme (selected within the user interface) in Angular 8

I have a custom-built application with Angular 8 where users can switch between two unique themes in the user interface. I have a specific div class that I want to change the background-color for each theme, but unfortunately I am having difficulty achievi ...

cssangularsassangular8theming

Retrieve the red, green, and blue components of a color in the RGB format

When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet: "#" + componentToHex(r) + co ...

javascriptjqueryhtmlcsscolors

Incorporating timed hover effects in React applications

Take a look at the codesandbox example I'm currently working on implementing a modal that appears after a delay when hovering over a specific div. However, I've encountered some challenges. For instance, if the timeout is set to 1000ms and you h ...

javascripthtmlcssreactjstypescript

Styling used on the ofx.com website

I am attempting to recreate the CSS effects used on ofx.com, which includes a picture of London and a grey box with text. However, my version is not working properly. I am unsure of what might be missing in my code. Here is the snippet: .generic-hero-bl ...

css

Challenges with CSS in Google Chrome web browser (Input field and Submit button)

Having trouble with the alignment of a textbox and button on Chrome, they're not displaying correctly. Here are examples from different browsers; notice how the textbox in Chrome is misaligned. Internet Explorer/Firefox https://i.stack.imgur.com/mf ...

htmlcss

Using CSS to remove the background of a dropdown button in a <select> element

I need to style a <select> element so that it appears like plain text until clicked, revealing the pulldown choices. Ideally, I would like to include small arrows to indicate multiple options, but I can add those as image overlays if necessary. My p ...

htmlcsscustomizationmozillahtml-select

Customize the CSS for the column containers in Material-UI's DataGrid with the

I am facing a challenge in trying to override the CSS property position on the .MuiDataGrid-columnsContainer. Upon reviewing the information available on https://material-ui.com/api/data-grid/#css, it seems that there is a rule defined for root but not spe ...

javascriptcssreactjsmaterial-ui

Attempting to use jQuery on click to set the background image of a div to a base64 encoded data image

Check out what I'm working on here The first div contains html with data:image;base64 <div id="large_photo_null" style="width:50px; height:50px; background-image: url( data:image;base64,R0lGODlhR.. );" > </div> When using html, the ba ...

javascriptjquerycss

Using JQuery to enable the movement of divs on a screen through clicking and dragging, without the use of

Recently, I've been experimenting with a small project involving draggable divs. However, the code I've written doesn't seem to be functioning properly, causing JQuery to become unresponsive. Is there an alternative method that is simple an ...

javascriptjqueryhtmlcss

Achieve the effect of bringing the div and its contents to the top when hovered over, all while keeping

I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in ...

jqueryhtmlcss

What are the best ways to ensure a website is responsive in a vertical

When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black a ...

htmlcss

What could be the reason behind the lack of vertical centering for the Spartan

I can't seem to figure out why my font isn't aligning vertically correctly. I'm using the Spartan MB font from Google, but it just doesn't look right, you can see here. https://i.stack.imgur.com/wbLc2.png This is my HTML code: <htm ...

htmlcssfonts

The Angular Material autocomplete panel does not disappear when autocomplete is hidden within a scrollable region

Having encountered a bug, I have raised an issue for it (https://github.com/angular/components/issues/20209). I am reaching out to inquire if there exists any workaround or solution known to anyone. You can observe the problem on this demonstration page h ...

htmlcssangularangular-material

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

javascripthtmlcss

Achieving sliders similar to those in the "level" window of GIMP can be done by customizing the shape of GtkScale in your C program

I have a query regarding the shape of GtkScale. Specifically, I am interested in making my GtkScale resemble the one found in the levels window of Gimp. To clarify: a bar 3 triangles (representing shadows, midtones, and highlights) https://i.stack.imgur ...

csscgtk

Eliminate the empty gap preceding the slideshow

I have a slideshow and aside content in HTML. My goal is to eliminate the space below the slideshow so that the aside content can be positioned right next to the end of the slideshow. Unfortunately, I am unsure how to remove this space without disrupting ...

jqueryhtmlcsswebslideshow

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...

htmlcssscroll

Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS. Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector. Below is the HTML and CSS co ...

htmlcsssvg

Tips to successfully utilize addEventListener on a submit action

Having issues getting this to work on submit, it functions properly when using document.getElementById("gets").addEventListener("click", b_button); but does not work when I try document.getElementById("gets").addEventListener ...

javascripthtmljquerycss