Disallow duplicate background images

How would I implement this:

On here?

.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

Hi there asasass,

what is the intended purpose of your coding?

coothead

I forgot to add the code:

Here:

Hi there asasass,

use this…

.wrapb, .wrapb::before {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  background-position: -260px 0;
  margin-top: 0;
  opacity: 0;
  transition: all 2s;
}

coothead

1 Like

I got it, thanks.

How would I do this one please?

.wrape .cover {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape.active {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}

What have you tried?

You need to apply the background-image rule to both selectors, then set the background-position on each one to the correct place.

So write a new rule for the background-image, then adjust your two existing rules.

2 Likes

I wouldn’t do it to that one as it is clearly nonsense to write more rules to achieve the same effect.

e.g.


.wrape .cover {
  width: 266px;
  height: 174px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
.wrape.active,.wrape .cover {background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;}
.wrape.active{background-position:-260px 0;}

Not only is that more rules to satisfy that outdated csslint it also complicates the css and makes it more unreadable! CSS isn’t just about smaller stylesheets it’s about readability, maintainability and common sense. (undoing styles is also considered bad practice)

If it makes the page easier to read and more understandable then repeating the odd image declaration is not a problem.

Read this to find out what you shouldn’t be doing.

However the question is why you should care so much about this CSS when you have ignored everyone’s comments about the nonsensical html you are using? If after everyone has spent considerable time answering your questions you go and do the very thing you were advised not to do is almost beyond belief. :confused:

6 Likes

Like this, possibly…

.wrape .cover, .wrape.active {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}


.wrape.active {
  border: 0;
  background-position: -260px 0;
}

coothead

1 Like

I don’t understand the purpose of the code in this topic. Don’t modern browsers avoid downloading duplicate copies of images? (“modern” as in later than IE6 - which died before I was born :shifty:)

2 Likes

The entire code is a nonsense, so I didn’t bother to point that out.

There seems to be a general obsession with straining gnats while swallowing camels.

3 Likes

It seems the OP, after persistently evading best practices recommended here, is now taking advice from a “linter”.
Reading the explanation in the link it appears the reason to avoid duplicate backgrounds is to save repetition in the css, not server requests. While I understand this point entirely, the opposite argument could be that you may apply the same logic to absolutely any css property that is used more than once in a style sheet. Do that for everything and you quickly end up with a million and one utility classes and every html element holding at least half a dozen different ones. The result being a more cryptic version of in-lining (not unlike Bloatstrap :grimacing:)
In the end it’s up to the developer’s judgement to determine where to draw the line with this kind of reusable/utility class set up. There will always be a tipping point where attempts to slim things actually create bloat and less maintainable code.
One reason I don’t always agree with these linters, there isn’t always a one best way that suits every scenario. The best approach should be decided on an individual basis.

4 Likes

Thank you for that explanation, Sam. I did indeed miss the point of the linter minimizing the background image calls in CSS rather than server calls. I fully agree with you regarding the discretionary arrangement of rules in CSS. I try to write reasonably efficient CSS and to arrange and comment it so I will be able to read and understand it a year after writing it. A couple of recent experiences reminded me that that practice is more than just a good idea :blush:.

2 Likes

Using a linter is also a way of enforcing certain standards across a team so that code is uniform and doesn’t look like it has been written by several different people. Large web sites can quickly become messy if the whole team doesn’t stick to certain sets of guidelines to produce uniformity. Despite the animosity for frameworks in this community they do much the same. Using bootstrap or foundation leaves high level architectural decisions to others and allows a team to focus on building an end product. Without those frameworks or the experience to make smart architectural decisions on team projects can quickly become very messy. I’ve never worked alone always on team on larger projects with continued maintainence. In those environments certain trade offs are required to keep things smoothly running f on an operational perspective. Much of that has to do with standardization across the entire team for better or worse. Also devs come and go so it’s important to implentations constructs like frameworks which make it easier for the next person to get up to speed quickly so long as a person with that skill set replaces the other.

3 Likes

Just because that’s the html you see in the code, doesn’t mean that’s the one I’m using.

When I make changes to one version, I make the changes in the other versions also.

I could have removed the html, and left it like this though, so you wouldn’t have gotten the wrong impression about what code I was using. Which probably would’ve been better.

<div class="wrape">
  <div class="cover" title="OPEN"></div>
  <div class="playButtone" data-audio="http://hi5.1980s.fm/;">
  </div>

Would you have done this one differently?
Would yours have looked different?
@PaulOB

I like seeing how code is formulated, that’s why I asked.
You can also learn a lot.

From this:

.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

To This:

.wrapb,
.wrapb::before {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  background-position: -260px 0;
  margin-top: 0;
  opacity: 0;
  transition: all 2s;
}

Would I be able to do something similar to how you did it here?
@PaulOB

But I’m confused on how that would be done.

.wrape .cover {
  width: 266px;
  height: 174px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape.active,
.wrape .cover {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
}

.wrape.active {
  background-position: -260px 0;
}

To This Code:


.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

But the question remains as to why you are keeping and working on what you know to be bad code.

From the perspective of those who have put time and effort into teaching you best practice and helping you create good code, it appears perverse and contemptuous when you revert to posting your previous bad code.

If you choose to work on it for your own reasons, so be it, but it is not reasonable to ask others to go over and over the same issues in numerous different versions.

I strongly suggest you post only the good versions of your code when asking for further assistance, if you want to avoid alienating those who might help you.

2 Likes

I have the code here, it didn’t go anywhere.

And for it to work on Blogger, all I do is add this in:

.widget ul.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget ul.nav li {
  float: left;
  margin: 0;
  padding: 0;
  border: none;
}


.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.wrape .cover {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape .cover {
  display: none;
}

.wrape.inactive .cover {
  display: block;
}

.wrape .cover::before,
.wrape .cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrape .cover::after {
  left: 177px;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  float: left;
}


/* Blogger

.widget ul.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget ul.nav li {
  float: left;
  margin: 0;
  padding: 0;
  border: none;
}

*/


.nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav a:hover {
  border: 3px solid red;
}

.nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.nav li:nth-of-type(8) a {
  opacity: 0;
}

.nav li:nth-of-type(15) a {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}

.nav .left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 255, 255, 0.5);
}

.nav .left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.nav .middle-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin:auto;
  width: 14px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.nav .right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.nav .right-background {
  position: absolute;
  top: 0;
  left: 32px;
  width: 12px;
  height: 100%;
  background: rgba(255, 0, 255, 0.5);
}

.wrape.inactive a {
  display: none;
}

.wrape.inactive .playButtone {
  display: none;
}

.wrape.active .playButtone {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
  fill: #aaff00;
}

.wrape.active {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}

.wrape .play,
.wrape .pause {
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  right: 0;
  margin: auto;
}

.wrape .pause {
  left: 0;
}

.wrape .hide {
  display: none;
}

<div class="wrape">
  <div class="cover" title="OPEN"></div>
  <ul class="nav">
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li><a> Audio Player</a></li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
        <div class="left-background"></div>
        <div class="left-border"></div>
        <div class="middle-background"></div>
        <div class="right-border"></div>
        <div class="right-background"></div>
      </a>
    </li>
  </ul>





  <div class="playButtone" data-audio="http://hi5.1980s.fm/;">


    <svg class="play hide" focusable="false" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>
    <svg class="pause hide" focusable="false" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>
</div>

I think I was able to successfully implement it here, using your method.

Did I do it right?
@PaulOB

.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
}

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background-position: -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}