不确定如何从复制的HTML5，CSS，JS中指定样式

Question

I have been slowly pulling apart an HTML5 template and have copy pasted a parallax section below several times on the same page As I have copied this 3 times for the parallax effect I also have the same background image as defined in the main.css

 /* ========================================================================== Counter Section Style ========================================================================== */ .counters { background: url(../img/bg1.jpg) fixed; position: relative; } .counters .facts-item { text-align: center; color: #fff; } .counters .facts-item .icon { margin-bottom: 20px; } .counters .facts-item .icon i { font-size: 50px; color: #fff; } .counters .facts-item .fact-count h3 { font-size: 35px; color: #fff; margin-bottom: 15px; } .counters .facts-item .fact-count h4 { font-size: 20px; color: #fff; 

  <div class="counters section" data-stellar-background-ratio="0.5"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-3 col-lg-3"> <div class="item-boxes wow fadeInDown" data-wow-delay="0.2s"> <!-- <div class="icon"> <i class="lnr lnr-pencil"></i> </div> --> <a class="nav-link" href="#video-area"> <h4>SaaS Assurance</h4></a> <p></p> </div> </div> 

The problem I have is that even though I have copied them, I would still like them to be their own sections with different backgrounds and with my limited experience on Web Dev I am not sure how class .counters from CSS which is defining the image I want to change is being picked up by the code which says counter section

Thanks all

Answer 1

In CSS, Classes can be used more than once , so if you copy the parallax section three times, then there should be three parallax section with the same background as declared by .counters which is used by every of your parallax section.

To make sure that every of those 3 parallax section won't use the same background, try to use ID instead as ID's can be only used once and must have a unique name.

When an ID and classes is used together , the ID attributes should override any declarations made by any classes used in the element. In this case, you can give an ID that contain an individual background property for every of your parallax section ( something like #parallax-section1 , 2, and more ), so .counters's background declaration will override.

Further reading :

1. CSS Selectors by MDN Web Docs.
2. Override Class Declarations by Styling ID Attributes by FreeCodeCamp.

---

Note: When copy pasting an HTML element, make sure you do select from the starting bracket till the closing ones.

Answer 2

thanks for all the responses. I found the issue that the class .counters was actually calling the image from class counters section from the code above, it must have just been ignoring the space and the section confused me :)