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

Tips for implementing and utilizing onclick functions in EJS

My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable. Below is the layout of the entire page: <% include ../partials/boilerp ...

javascripthtmlcssexpressejs

Inquiring about browserify or webpack on a website using node - a few queries to consider

Seeking assistance with a website project I am currently working on. The project consists of 7 HTML documents, 3 stylesheets, 8 JavaScript files (including jQuery.min.js and some additional jQuery plugins), and various images. I am looking to bundle and mi ...

javascripthtmlcssnode.jsweb

What are some ways to create a one-sided design without being limited by container constraints

How can I create a block on my site where there are no container restrictions on the right, but they are limited on the left? The goal is to have an image pressed against the right edge of the page while keeping the container limits on the left. Here is my ...

htmlcss

What is the best way to prevent a sticky element from scrolling along with the

I am looking to prevent a sticky div from taking up space on the website. It currently sticks to the desired position as expected. https://i.sstatic.net/wG4SK.png HTML <div v-if="isToastActive" class="toast"> <span clas ...

htmlcssvue.js

Tips for aligning text to the right and keeping it in line with another section

I have a code snippet and I'm aiming to align the caption for my "DigDug" game directly below the game itself, perfectly lined up horizontally. The id for the caption is "#DigCaption" and the id for the game is "#DigDug". Could anyone provide guidance ...

htmlcss

I am facing an issue where HTML is not loading images or some parts of my CSS in PHP

I've been working on connecting my website to a MySQL database using PHP. Initially, I thought I could keep the HTML and CSS the same, but after adding everything, the images on the website stopped showing up as they did before. The fonts and other el ...

phphtmlcssimage

Tips for creating CSS from the Google Chrome inspector for future use

Hey there, I spent the evening debugging my JSF page and noticed some changes in appearance when checking/unchecking options in Google Chrome Inspector. I want to create a new CSS file based on these checked options and save it for use in my web applicat ...

cssgoogle-chrome-devtools

My preference is for the flex box to expand in width (sideways) without increasing in height (up and down)

Is there a way for flex items to expand in width but only in height when necessary? I enjoy using flexbox, but I find it frustrating that all flex items in a row grow to the same height even when there isn't enough content to fill them, resulting in a ...

htmlcssflexbox

Is it possible to adjust an inline CSS style upon clicking a link?

I currently have a form that is hidden using inline styling style="display: none;" Is there a way to dynamically update this style to style="display: inline;" once a specific link on the page is clicked? ...

htmlcssstyles

Issues arising from the event target

What is the reason behind this code functioning successfully only when the alert function is called? The color changes after closing the alert box, but if the line with the alert command is commented out, nothing happens. function setLinkColor(el) ...

javascriptjquerycss

When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...

htmlcssprintingmedia

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

The CSS file seems to be ineffective when building Vue in production

In my Vue project, I am using a single file component with a chart module. In order to customize the styles of the chart module's CSS, I created a custom CSS file in the assets folder where I added lines to override certain styles (such as changing th ...

cssvue.jsamazon-s3gitlab-ci

Adjust the heights of certain headers in an HTML table, not all of them

Here is the link to my JSBin: https://jsbin.com/xofaco/edit?html,css,output I am facing an issue with an HTML table that has both nested headers and regular headers. My goal is to make all headers equal in height, specifically I want columns labeled "four ...

htmlcsshtml-table

Having trouble getting the background image to display within the div element

I'm having trouble getting my background image to display in the specific div I want it in. It works fine when I place it in other elements, like the body element, but for some reason, it's not showing up where I need it to. Any chance you could ...

htmlcss

Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges: The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to typ ...

htmlcss

Halt the execution of a function upon clicking a div element

I'm currently working on a function that needs to be stopped when a div with the class "ego" is clicked. This function toggles the visibility of the header based on the scroll position and should only run by default. Below is the code snippet: $("#e ...

javascriptjqueryhtmlcss

The drop-down list unexpectedly closes at the most inconvenient moment

I am looking to create a search input with a drop-down list. The requirement is for the list to close when the focus or click is anywhere except the search input. I have added a function listClose() to the "blur" listener, but now I am unable to capture t ...

javascripthtmlcsstypeahead

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Is there a way to create a two-toned horizontal rule tag?

Looking for a way to create a stylish two-toned divider line at the bottom of my header. It should be two pixels tall, with a grey top half and white bottom half. While I considered using two one pixel divs stacked together, I'm hoping there's a ...

htmllinear-gradientscss