Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this:

.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
background: transparent !important;

background: url('images/bgimage.jpg') !important;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed !important;
background-size:100% 100% !important;

text-shadow: 0 0 0;

The issue is that the same background image displays on all pages.

How can I personalize each page to display a unique background image while still utilizing the same theme (in this case 'a')?

jqueryhtmlcssjquery-mobilebackground-image

Answer №1

Assign a unique class to each page such as custom1, custom2, and so on.

<div data-role="page" class="custom1">
</div>

<div data-role="page" class="custom2">
</div>

Ensure each class has a different background assigned

.ui-page-theme-a.custom1,
.ui-page-theme-a.custom1 .ui-panel-wrapper {
  background: url(custom1.png);
}

.ui-page-theme-a.custom2,
.ui-page-theme-a.custom2 .ui-panel-wrapper {
  background: url(custom2.png);
}

Check out the demo here!

Answer №2

Correction: Apologies for the confusion, I initially thought you were adding the image URLs via jQuery. Using that approach may be advantageous as it will help maintain the cleanliness of your CSS. You can add them in with jQuery.

Page 1

 background: url('images/bgimage-p1.jpg') !important;

Page 2

background: url('images/bgimage-p2.jpg') !important;

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

validating links in Laravel

Is it feasible to validate a href element in laravel? For instance, I have various user responses in my guest book and each user has the capability to delete their posts. The deletion process is as follows: <div class="col-lg-2"> <ul class="l ...

phphtmllaravel

Error in designing the ReactJS navbar (utilizing internal Bootstrap CSS)

I am facing an issue with the navigation bar in my project. When I use a link to an external source for the navigation bar, it works fine. However, when the internet connection is slow, I notice a brief loading time for the navigation bar which is quite bo ...

cssreactjsnavbar

Is there an issue with my Regex pattern for extracting link elements when scraping content?

I'm currently facing an issue with my VB.NET scraper. The scraper is designed to extract all links from an HTML string that I have already retrieved, and upon inspection, the links are present. It appears that the problem lies within my regex expressi ...

htmlregexvb.net

Altering the href text within a script causes the text to disappear instead of updating

Function Triggered by Button Click: function LoadEnglishText() { document.getElementById("txt_whatwedo_learnmore2").innerHTML = "here."; } HTML Link to be Updated: <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier ...

javascripthtml

Display additional tiles within a compact container

I'm attempting to replicate the user interface used by foursquare! Positioning the map slightly off center like they have . I've figured out how to do one part but struggling with the second part. Initially, I loaded the map in a small div (t ...

javascriptcssleaflet

Ajax continues to operate even if an error is detected

Hello fellow programmers! I'm currently facing an issue with form submission and validation using jQuery with 2 ajax events. The problem lies in the fact that even if the first ajax event (timeconflict.php) returns an error, the second ajax event (res ...

javascriptphpjqueryhtmlajax

A guide on implementing multiple ternary operators in a Vue.js template

Is it possible for a template to return three different values instead of just two, based on the data? I am familiar with using two conditions, but is there a way to use more than two without getting a syntax error? <option {{ change === 1 ? &apos ...

javascripthtmlvue.jsvuexconditional-operator

Steps for incorporating HTML templates into a Next.js 13 project

Looking for advice on converting an HTML template using Bootstrap or Tailwind CSS into a Next.js 13.4 project. I have experience with Next.js 12 but understand that the project structure has changed, removing files like _app.js and _document.js. Any tips o ...

htmlreactjsnext.jslayoutnext.js13

Getting the value of radio button groups in C# - A complete guide

Here is the HTML code: <form runat="server"> <table> <tr> <td> From Date: </td> <td> <input type="text" runat="ser ...

c#htmlasp.net

Separate the information into different sets in JavaScript when there are more than two elements

Upon extraction, I have obtained the following data: ╔════╦══════════════╦ ║ id ║ group_concat ║ ╠════╬══════════════╬ ║ 2 ║ a ║ ║ 3 ║ a,a ...

javascriptjqueryajax

Using R Markdown and Hugo to Style Blog Titles

I am currently utilizing Hugo and Blogdown to craft a blog following the guidelines outlined here. The title of my blog is specified at the beginning of each post, resembling the example below: --- title: One Two Three author: First Last date: '2019- ...

cssr-markdownhugoblogdown

What is causing my divs not to center with justify-content?

I've been working on centering two divs inside a parent div horizontally. The parent div is set to flex-direction: column so that the child divs stack one below the other, but I want them centered in the middle of the page. Although justify-content: ...

htmlcssflexbox

Is it possible to utilize the Linear-gradient property for creating a vertical background color effect?

I'm currently attempting the following: body { height:100%; background: -moz-linear-gradient(left, #DB2B39 50%, #2B303A 50%); background: -webkit-linear-gradient(left, #DB2B39 50%,#2B303A 50%); background: linear-gradient(to right, #D ...

htmlcssbackground-color

A picture placed side by side with a list

Could someone please help me figure out what I'm doing incorrectly? <div class="row"> <ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li> </ul> <div> ...

htmlcssbootstrap-4

Ways to rotate SVG images exclusively upon clicking

After experimenting with rotating SVG images on my navbar buttons, I encountered an issue. Whenever I click one button, all the images rotate simultaneously. Additionally, clicking elsewhere does not reset the images to their original positions. This is t ...

javascripthtmljquerycss

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

javascriptjqueryhtml

Show the selected values of different checkboxes

Can anyone assist me with jQuery? I have an easyui accordion containing text and checkboxes, with multiple inputs within each accordion. The values of the inputs are retrieved from PHP arrays. I am trying to display the value of each input when checked ( ...

jqueryhtmlinputaccordion

Guide on Deleting Specific Item Using SQL Data Source Delete Statement

I am facing an issue when trying to remove a specific item from a grid view in my SQL server database. I have configured DataKeyNames and linked a sql data source with the grid view. The delete command is set as follows: DeleteCommand="DELETE FROM product ...

htmlasp.netsql-serverdatasource

Paypal Payment Plans on a Monthly Basis Utilizing the Bootstrap Pricing Slider

I came across this fantastic Bootstrap Pricing Slider that I found originally at Within my Bootstrap Pricing Slider, there is a "total amount" calculated after some math, resulting in a final score. The slider includes a "Process" button which currently ...

javascriptjquerycsspaypalpaypal-subscriptions

Is there an automatic bottom padding feature?

Currently, I am facing a challenge in fitting the loader into the container without it being overridden by the browser. Using padding-bottom is not an ideal solution as it results in the loader appearing un-resized and unprofessional. Any suggestions or co ...

cssreactjstypescript