Introducing fresh background images for every MDlite card

Hello StackOverflow community! I am a long-time user and this is my first post. I need some help with adding two MDlite cards to my website, each with a different background image. However, I'm encountering an issue where the last-declared background image always shows for both cards. Any assistance would be greatly appreciated. Below is the complete code that you can copy into any browser to see the problem (apologies for the formatting, as I'm writing this from my phone):

                <!doctype html>

            <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>Website Title</title>
                <meta name="description" content="Percula Creative">
                <meta name="author" content="Percula Creative Author">
                <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
                <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
                <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_purple-orange.min.css" />
                <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>  
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->
                <link rel="icon" href="favicon.png">
            </head>
            <body>
                <!-- Uses a transparent header that draws on top of the layout's background -->
            <style>
            .demo-layout-transparent {
              background: url('../assets/demos/transparent.jpg') center / cover;
            }
            .demo-layout-transparent .mdl-layout__header,
            .demo-layout-transparent .mdl-layout__drawer-button {
              /* This background is dark, so we set text to white. Use 87% black instead if
                 your background is light. */
              color: white;
            }
            </style>

            <!-- Always shows a header, even in smaller screens. -->
            <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
              <header class="mdl-layout__header">
                <div class="mdl-layout__header-row">
                  <!-- Title -->
            <a href="index.html" style="text-decoration: none; color:white" class="mdl-layout-title">Website Title</a>
                  <!-- Add spacer, to align navigation to the right -->
                  <div class="mdl-layout-spacer"></div>
                  <!-- Navigation. We hide it in small screens. -->
                  <nav class="mdl-navigation mdl-layout--large-screen-only">
                    <a class="mdl-navigation__link" href="apps.html">Apps</a>
                    <a class="mdl-navigation__link" href="">About</a>
                    <a class="mdl-navigation__link" href="">Contact</a>
                  </nav>
                </div>
              </header>
              <div class="mdl-layout__drawer">
                <span class="mdl-layout-title">Website</span>
                <nav class="mdl-navigation">
                  <a class="mdl-navigation__link" href="">Apps</a>
                  <a class="mdl-navigation__link" href="">About</a>
                  <a class="mdl-navigation__link" href="">Contact</a>
                </nav>
              </div>
              <main class="mdl-layout__content" style="background-color: #EEEEEE;">
                <div class="page-content" >


                    <div style="width:80%; max-width:780px; margin: 0 auto; padding: 16px">
            <!-- Wide card with share menu button --> <style> .demo-card-wide.mdl-card { width: 100%; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://www.imagenspng.com.br/wp-content/uploads/2015/07/minions-03.png') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } </style> 
            <div class="demo-card-wide mdl-card mdl-shadow--2dp""> 
            <div class="mdl-card__title"> 
            <h2 class="mdl-card__title-text"></h2> </div> 
            <div class="mdl-card__supporting-text">
            <p>Lorem Ipsum dolor1...</p>
            </div> 
            <div class="mdl-card__actions mdl-card--border"> 
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="">Download</a> 
            </div> 

            <div class="mdl-card__menu"> 
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
            <i class="material-icons">share</i> 
            </button> 
            </div>

            </div>
            </div>




                    <div style="width:80%; max-width:780px; margin: 0 auto; padding: 16px">
            <!-- Wide card with share menu button --> <style> .demo-card-wide.mdl-card { width: 100%; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://i2.mirror.co.uk/incoming/article6379795.ece/ALTERNATES/s615b/Minion.jpg') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } </style> 
            <div class="demo-card-wide mdl-card mdl-shadow--2dp""> 
            <div class="mdl-card__title"> 
            <h2 class="mdl-card__title-text"></h2> </div> 
            <div class="mdl-card__supporting-text">
            <p>Lorem Ipsum dolor2...</p>
            </div> 
            <div class="mdl-card__actions mdl-card--border"> 
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="">Download</a> 
            </div> 

            <div class="mdl-card__menu"> 
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
            <i class="material-icons">share</i> 
            </button> 
            </div>

            </div>
            </div>


                </div>
              </main>
            </div>


            </body>
            </html>
htmlcssmaterial-designmaterial-ui

Answer №1

It seems that the issue is arising because the CSS code has been duplicated within the page, causing the second instance to override the first one. This results in both divs being affected by the same style rule instead of having individual backgrounds.

.demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://www.imagenspng.com.br/wp-content/uploads/2015/07/minions-03.png') center / cover; }

To fix this problem and have different background images for each div, you need to create separate rules for each div.

Here’s what you need to do:

1) Remove the entire second <style>...</style> block.

2) Assign a new class to the second div like this:

<div class="mdl-card__title second">

3) Add a new CSS rule to your first <style>...</style> block as follows:

.demo-card-wide > .mdl-card__title.second { color: #fff; height: 176px; background: URL('http://i2.mirror.co.uk/incoming/article6379795.ece/ALTERNATES/s615b/Minion.jpg') center / cover; }

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

Create a Cutting-edge Navbar in Bootstrap 5.1 Featuring Three Distinct Sections: Left, Center, and Right

I'm encountering challenges with formatting the navbar layout I am currently designing. My goal is to create a navbar with three distinct sections as outlined in the title. In the first section on the left, there should be an image and a button-like ...

htmlcssbootstrap-5navbar

Browse through different backgrounds while a single background remains still for multiple scroll actions

I am trying to create a specific scrolling effect on my webpage: Upon loading the page, I want a div with background1.png to be displayed. As the user starts scrolling, I want this div to remain fixed for a predetermined amount of scroll movements. Once t ...

jqueryhtmlcssscrollcss-position

What is the best way to transfer Django variables to HTML?

Looking to send data from the rs232 port and showcase it in a graph using javascript? Check out this resource: Seeking guidance on importing the views.py variable into my html file. views.py import io from django.http import HttpResponse from django.shor ...

pythonhtmldjangoserial-port

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

Nested min-height in HTML is crucial for ensuring that parent

HTML: <div id="a"> <div id="b> </div> </div> CSS: html, body { height: 100%; background: red; margin: 0; } #a { min-height: 100%; background: green; } #b { min-height: 100%; background: y ...

htmlcss

"Implementing jQuery to dynamically set the href attribute for a link when

My website features a tabbed menu that displays content from various WordPress categories including Cars, Trucks, and Buses. The active tab is randomly selected each time the page is reloaded. However, there seems to be an issue with the "View More" button ...

javascriptphpjqueryhtmlwordpress

Exploring the depths of design in material-ui

I've just started diving into material-ui and decided to create a simple app in the SandBox: https://codesandbox.io/s/eager-ride-cmkrc The styling using jss is a bit unusual for me, but with your help on these two exercises, I'm sure I'll ...

javascriptreactjsmaterial-uijss

The static background and fixed header are locked in a perpetual battle

I am currently working on creating a fixed header that remains at the top of the page. However, I am facing an issue where the background seems to be overlapping and hiding the header. <style type="text/css> html, body {height:100%; margin:0; paddin ...

htmlcss

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

htmlcss

Steps to insert a column within an HTML document for PDF printing

Is there a way to create an HTML document that can be printed in PDF format but the column feature isn't functioning as expected? Would I need to use a specific library or tool? ...

htmldompdf

Finding elements through their text representation

I am struggling to select an element using the text "SELECT PRODUCT" in the following HTML: <div style="font-family: franklin-gothic-urw; font-weight: 400; font-style: normal; font-size: 19px; opacity: 1; color: rgb(255, 255, 255);">SELECT&nbsp; ...

javahtmlcssseleniumxpath

Tips for improving the styling of a django form with mixed elements

Here are two different forms I am working with: class InitialForm(Form): trn = IntegerField(widget=NumberInput, required = False) klient = ChoiceField(choices=KLIENTS, required = False) class SecondForm(Form): faktura = CharField(max_length = ...

cssdjangodjango-forms

What steps should I take to address the original tag error for Vue.js in the index.html file?

Desired Learning Interested in delving into the Vue.js framework using Vim and this helpful guide: https://cr-vue.mio3io.com/guide/chapter1.html#繰り返しの描画 Encountered Issue Difficulty in getting Vue tags to be recognized and functional i ...

htmlvue.jsvim

Filter Products with Magento Layered Navigation - Checkbox Options

Is there a method to transform the layered navigation into checkboxes similar to Asos? I have noticed that there are modules available for purchase claiming to offer this functionality. I may consider using one of those, but I wanted to explore any other ...

phpmysqlhtmlcssmagento

Deactivate the selection option in Syncfusion NumericTextbox

I have integrated an Angular NumericTextbox component from Syncfusion into my application. A problem we encountered is that when the input is clicked, it automatically gets selected. Is there a way to disable this behavior? Problem: https://gyazo.com/a72b ...

htmlangulartypescriptsyncfusionnumeric-textbox

Is there a way to align both the horizontal and rotated lines to intersect at a common point in HTML and CSS?

As a beginner, I'm looking to create a structure resembling a thigh, leg, and ankle using thick lines. My aim is to rotate them with animation, ensuring that the joints between the lines mimic those of a knee joint and hip joint. Below is the code sn ...

htmlcssweb

Changing the border color of a select component in Material-UI when it is hovered

I have the ability to modify the border color to grey in dark mode for the "before" https://i.stack.imgur.com/jDHxH.png and "after" https://i.stack.imgur.com/9qm9i.png sections. However, when I hover over the "Select" field, it turns black. https://i.stac ...

reactjsmaterial-ui

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...

jquerycsshtmldatecalendar

Caution: The use of <fieldset> inside a <p> tag is not allowed in the TextField Component of Material UI in React JS. Please review and edit accordingly

<div className="textInputTag"> <span className="label">{props.label}</span> <TextField placeholder={placeholder} error={error ? true : false} defaultValue={props.defaultValue} onBlur={onBlur} onInput={on ...

reactjsmaterial-uiuitextfieldreact-error-boundary

The lower division remains static when the browser window is resized

Why does the div with class .lower not move to the bottom of the page when the screen is resized? Could this be because of its CSS property position:absolute;? Check out the code snippet here. #lower { width: 100%; position: absolute; bot ...

htmlcss