Background images are not transitioning to alternative images on mobile devices

I've been experimenting with my portfolio site (have a look at www.imkev.in) and I'm facing some issues on the mobile version. Despite having media queries in my CSS that should trigger a switch to smaller file sizes and differently cropped images for screen widths below 530px, the background image elements don't seem to be cooperating. The layout of other page elements switches as intended at lower screen widths, which confirms that the basic media query is functioning properly.

Oddly enough, when I shrink the browser window size on my desktop to less than 530px, it correctly transitions to the alternate images. Furthermore, the mobile device emulators I've tested online (like Chrome developer tools) display the expected behavior. It seems like the issue only arises on real mobile devices.

Below is the CSS snippet I am using:

.portfolio-background {
   background: url(/assets/images/background1-small.jpg) fixed;
   background-size: cover;

   @media (min-width: 530px) {
   .portfolio-background {
        background: url(/assets/images/background1.jpg) fixed;
        background-size: 100% 100%; 
    }
}

I have attempted adjusting the background-size property to "cover" within the smaller media query, but it didn't resolve the problem. Additionally, I have set the viewport meta tag at the top of my HTML document to ensure the browser window width matches the device's width:

<meta name="viewport" content="width=device-width, initial-scale=1">

Do you have any suggestions?

EDIT: I am utilizing a compiler and the code I initially provided was before the compiler worked its magic. I have updated the post to include the actual code output. Still working on finding a solution.

htmlcssmobileresponsive-designmedia-queries

Answer №1

The swapping of background images on your website seems to be functioning correctly. However, it appears that the issue lies in the fact that you are not achieving the desired result due to the size and format of your mobile background as well as your CSS rules.

While the code on your site slightly differs from what was provided, let's consider an alternative example:

body {
    background: url(/assets/images/background1-small.jpg) fixed;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

This adjustment may bring you closer to your intended outcome, but you might notice that it fails to extend far enough at certain viewports. To tackle this latter concern, it's advisable to create a taller background image as a supplement.

Update

It seems there must be a more efficient method to cater to all screen sizes instead of using different background images for each one. Is there a way to achieve a responsive background image for mobile devices?

Crafting a suitable background for mobile can prove challenging since the layout of elements can undergo significant transformations compared to desktop formats.

  • Consider adjusting your mobile background image to match the proportions of the corresponding element on mobile.

  • In some cases, incorporating a background color alongside your image could be beneficial.

  • If partial visibility of the background image is acceptable, employing background-position can be highly advantageous. For instance, if the focal point lies at the center of your image, the following CSS snippet can help center the background within the middle of your element:

element {
    background: url(/assets/images/background1-small.jpg) fixed;
    background-size: initial;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Wishing you success in implementing these suggestions!

Answer №2

Check out this interesting link:

You need to make a correction to the media query you are using. Instead of "min," switch it to "max." This change indicates that the specified width is the maximum allowed. Therefore, any device with a width equal to or less than 530px will apply the styles you've set.

Answer №3

Let's make it like this:

.portfolio-background {
  background: url(/assets/images/background1-small.jpg) fixed;
  background-size: cover;
}

  @media (min-width: 530px) {
    .portfolio-background {
      background: url(/assets/images/background1.jpg) fixed;
      background-size: 100% 100%; 
     }
}

To clarify, the regular rules will be displayed first, followed by the media query, within which the same selectors with specific parameters that differ from the regular rules.

Answer №4

background-size: fill;

Needs to become:

background-size: 100% 100%;

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

Eliminating a decimal point from the Document Object Model

I've got some HTML code that's being generated through PHP. It includes a number with two decimal places within a span element that has the class "amount": <span class="amount">200.00</span> My goal is to find a way to use a client- ...

javascriptjqueryhtml

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

javascriptjqueryhtmldrag-and-drop

Navigation bar featuring two interactive elements alongside a border on the first element

I have created an image depicting my desired outcome. The logo should resize based on different screen resolutions, and the navigation container should be as long as the list items <li>. The bottom border must extend to the lower left corner of the ...

htmlcssresponsive-design

Enlarge an element to the extent of filling the list item

I am facing a challenge in expanding the a elements within this jsfiddle to fully occupy the li element. The use of display:block does not seem to be effective since I am utilizing a table for spacing. What steps can I take to achieve this while ensuring ...

jqueryhtmlcsshtml-lists

Modify the text tone within a specific cell

Welcome to my unique webpage where I have implemented a special feature. The text highlighted in red represents the unique identifier for each individual cell. Interestingly, below there is an input field containing the code "0099CC", which corresponds to ...

javascriptcss

CSS search bar with sharp corners and radius ignored

I am currently developing an Android application using Angular NativeScript, and I'm aiming to implement a search bar with rounded corners. My HTML code looks like this: <SearchBar class="search"></SearchBar> In my CSS file, I h ...

htmlcssangularnativescriptradius

Forwarding based on URL/Query Parameters

I'm looking to create a redirect for users based on URL or query parameters, but I'm not sure how to go about it. For example, if the URL is https://www.tamoghnak.tk/redirect?link=https://www.tamoghnak.tk/gobob, I want to redirect to /gobob. If ...

javascripthtmlnode.jsurl-parametersquery-string

Text wrapping over in 5 column design using Bootstrap

After building a simple webpage with Bootstrap 5, I've run into an issue where the text in the columns overlaps. When the screen is at its full size, everything looks good. But as I start to reduce the size of the screen, the text gets smaller until t ...

htmlcssbootstrap-5

Table designed using the Flexbox layout model

I am looking to create a table with multiple columns that can handle dynamic data. The challenge is that using the base <table> element would cause the column width to change when the content changes and I also need the ability to hide columns using ...

htmlcssflexbox

Are you wondering why there isn't a straightforward solution for swapping page content using JavaScript?

Is there truly no straightforward solution to the issue at hand - specifically, swapping HTML content on web pages? In this scenario, using jquery's load() isn't viable because I need to load a file locally for Node-webkit, and due to Cross orig ...

javascriptnode.jshtmlnode-webkitelectron

Is there a way to ensure that neighboring divs have the same height as the tallest div in a row?

In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This probl ...

htmlcss

Trouble with CSS Class Showing Up Only When Hovered

My goal is to make the .panel-text element visible only when a user hovers over the panel. I attempted to use the overlay CSS class, but I encountered issues where the text either wouldn't show at all or would always be displayed. Here is what I have ...

htmlcss

What is the best way to initiate a slideshow using an external .js file?

Having an issue with my slideshow. When I put the CSS and JavaScript code in the same page, it kind of "works" but quickly goes transparent, which is not ideal for me. I prefer keeping things organized with separate files - one for each. However, when I mo ...

javascriptjqueryhtmlcss

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Is it possible to create a link/button that triggers an AJAX/jQuery function to load new content, while still providing a link to the same content on a separate page? I am particularly concerned about SEO and how search engine crawlers will index my sitem ...

jqueryhtmlajaxseohref

Shift div position when clicked and employ jQuery animations

I have been attempting to add animation to a DIV element by using jQuery. The goal is to move the DIV from the center to the left when it is clicked, but I am encountering some issues. The parent div has a position of "relative", and my initial idea was to ...

javascriptjqueryhtmlcss

What is the best way to create a list with images in a dropdown menu using HTML?

Thanks so much for your assistance! Below is the code snippet I am currently working on <li><a href="#Language">*LanguageHERE*</a></li> I am hoping to turn this into a dropdown menu that displays flags representing all available ...

javascripthtmlcss

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

cssreactjsmaterial-uireact-tablereact-table-v7

Experiencing issues with nested jQuery submit functions not triggering

I'm attempting to use AJAX to submit a form once a user has clicked on an image element. HTML <img class="remove_subscription" id="remove_mobile_id_<?php echo get_the_ID(); ?>" src="<?php echo get_bloginfo('template_director ...

jqueryhtmlajaxwordpress

The search box and submit button display without any visible borders

Question: I am facing an issue with the appearance of the searchbox and submit button in my PHP project. They look different compared to a simple HTML form. How can I fix this? The code on the PHP subpage is as follows: <header id="header"> <div ...

htmlcss

What is the best way to retrieve the class name of a div element that comes before with jquery?

I'm currently working on a new design and I need to retrieve the name of the class from a div element that is positioned above another div element. Here's an example: <div class="random name a"></div> <div class="the name of this ...

jqueryhtmlcss