Switching background images dynamically depending on the screen size: CSS and HTML5 Gallery

Here's the issue: the HTML5 page is responsive, but the background images are not changing with the screen size. The current code looks like this:

<div id="home-gallery" class="gallery-container fullscreen">
<section id="home-welcome" class="slide-1 gallery-slide background-cover" style="background-image:url(static/img/home/image1.jpg)">
.....

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image:url(static/img/home/image2.jpg)">

Currently, it is using one common image. I attempted a solution in CSS:

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

But I'm unsure how to link the style="background-image: property to the CSS code. Should I write it like this:

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image">

And in the CSS:

#home-welcome background-image
@media (min-width:800px) { background-image: url(bg-1024.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

Any help would be greatly appreciated. I've tried troubleshooting but haven't had luck so far.

javascripthtmlcss

Answer №1

@media (min-width:800px) { 
#home-welcome{
background-image: url(bg-800.jpg);
}
}
@media (min-width:1024px) {
#home-welcome{
 background-image: url(bg-1024.jpg);
}
}
@media (min-width:1280px) {
#home-welcome{
 background-image: url(bg-1280.jpg);
}
}

This code adjusts the background image of the home-welcome section based on the screen size.

It is noted that by using min-width, all three rules will apply. Consider using max-width for more specificity.

Update: The use of max-width may vary depending on your desired outcome. Keep in mind that CSS rules cascade, with the last declared rule taking precedence. Apply !important with caution.

Corresponding HTML:

<section id="home-welcome" class="slide-2 gallery-slide background-cover">

Refer to http://www.w3schools.com/cssref/css3_pr_background-size.asp for more information.

You can utilize background-size:contain to ensure the image fits the container div.

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

After reaching the character limit, errors occur due to data being sent through Ajax requests on keyup

My website has a feature where users can input zip codes and get information based on that. However, I am facing an issue with the ajax call when users continue typing beyond the required number of characters for zip code entry. Even though the additional ...

javascriptajaxjquery

Angular application designed to identify the origin of the user

I am managing 3 distinct angular applications, each with its own unique URL. Login application Launcher application Content application Users are required to navigate through the applications in the following sequence: login > launcher > content. W ...

javascripthtmlangular

Adjusting the color of a cell based on its value

Currently, I am in the process of converting a CSV file to an HTML table by utilizing a tool available at . However, I am facing a challenge in modifying the background color of cells based on their values. I would greatly appreciate any help or guidance w ...

javascripthtmljquerycss

Bootstrap select box gracefully fits within a dynamically adjusting height div

Can someone help me troubleshoot the issue with displaying/overflowing the .drop-down outside of the .item box in this demo? I need to keep the height of the .item as auto but for some reason, I can't enable overflow visible on it. .item{ backg ...

csstwitter-bootstrap-3bootstrap-select

What is the reason behind the TypeError thrown when attempting to assign to `NaN` or `undefined` in JavaScript

A.S.: The question pertains to the type of error rather than the phenomenon itself "use strict" results in a TypeError when system variables like NaN and undefined are modified. But why is it categorized as a TypeError instead of a SyntaxError? Edit: I ...

javascripttypeerror

Display only the spans that contain text or are not empty

I need a solution to hide only those spans that are empty. <div class="img-wrapper"> <div class="showcase-caption" style="display: block; "> <span id="MainContent_ImageCaption_0">This one has caption</span> </div> ...

javascriptjqueryhtmlcss

Canceling text as soon as the search input is entered in Vue.js

When I use the search input box, the last text I typed in gets cancelled. Can anyone help me with this issue? <input class="navbar-searchbar__text-field" type="search" :value="searchQuery" name=" ...

javascriptvue.jssearch

Is there a way to modify this within a constructor once the item has been chosen from a randomly generated array?

If I use the following code: card01.state = 3; console.log(card01); I can modify the state, but I'm interested in updating the state of the card chosen by the random function. class Item { constructor(name, state) { this.name = name; thi ...

javascriptarraysobjectrandomconstructor

AngularJS - Enhance table row visibility with ngRepeat for targeted highlighting

Example Data <table class="table table-condensed table-striped table-responsive"> <thead> <tr> <th>Sender</th> <th>Subject</th> <th>Received</th> <th>Actions&l ...

htmlangularjstwitter-bootstrap

Vue.js is unable to render the template using Object

During this demonstration at https://jsfiddle.net/ccforward/fa35a2cc/, I encountered an issue where the template could not render and the data in resultWrong remained empty with a value of {} At https://jsfiddle.net/ccforward/zoo6xzc ...

javascriptvue.js

Innovative solution for detecting and replacing undefined object properties in Angular 2 with TypeScript

After encountering the issue of core.umd.js:3523 ORIGINAL EXCEPTION: Cannot read property 'fullName' of undefined I realized that the Exception stemmed from a Template trying to access a specific property: {{project.collaborators["0"]["fullN ...

javascriptangulartypescriptundefined

Next.js Configuration Files Explained

Currently, my application is functioning well with the use of Next.js and Next.js API tool for handling requests. The backend is managed through sanity.io which is working smoothly. In my sanity configuration setup, I have a dedicated file named 'san ...

javascriptreactjsnext.jsvercelsanity

Perform a task if a checkbox is marked or unmarked

Currently, I am working on an HTML form that includes a checkbox asking users if they have a phone number. I am facing an issue where I want to implement two actions: 1. If the user checks the checkbox, a new input element should appear on the same page ...

javascriptajaxcheckboxdom-events

Discover more in React about using ellipses (...) with dangerouslySetInnerHTML

What is the best method for limiting the number of HTML lines retrieved using dangerouslySetInnerHTML in a React application and creating a '... Read More' expander for it? I attempted to use react-lines-ellipsis, but unfortunately the 'tex ...

htmlcssreactjsnpmellipsis

Using JQuery to reveal a hidden child element within a parent element

I'm facing a challenge with displaying nested ul lists on my website. The parent ul is hidden with CSS, causing the child ul to also remain hidden even when I try to display it using jQuery. One approach I've attempted is adding a class to the f ...

javascriptjqueryjquery-selectors

I'm experiencing a problem when trying to add a document to Firebase Firestore using React Native - it doesn't seem to

I'm currently working on a React Native project that utilizes Firebase v9. My goal is to add a user object to my user collection whenever a new user signs up through the sign-up screen. However, I've encountered an issue where the user object is ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Steps for adding an array of JSON objects into a single JSON object

I have a JSON array that looks like this: var finalResponse2 = [ {Transaction Amount: {type: "number"}}, {UTR number: {type: "string"}} ] My goal is to convert it into the following format: responses : [ { Transaction Amount: {type: "number"}, UTR numbe ...

javascriptjsonangular

Utilize jQuery to generate a dynamic table within a Razor view

I am trying to implement a table in a razor view. <div class="row" style="margin-left:80%"> @if (ViewBag.IsGlobal == 1) { <script> $(document).ready(function () { $("#btnViewLocal").prop("disabled",t ...

jqueryhtmljsonasp.net-mvcrazor

Launching the Node.js application on Heroku resulted in encountering an issue: "Application error - There was a problem within the application

When I access the browser using http://localhost:8080/, I can see the message Hello World with Express. I am currently trying to deploy this application on Heroku. I have followed the tutorial provided by Heroku. 1) Create a new app 2) Choose an App name ...

javascriptnode.jsexpressheroku

Difficulty altering link hover background color

I'm having trouble changing the hover effect background-color on the tweets of this page: Despite my efforts, all the links except for the latest tweets are working perfectly. What am I missing? Here's what I've been trying... <script& ...

javascriptjqueryhtmlcss