add class to change position background image within div without javaScript

Question

I can not for the life of me figure out what seems so simple. And on top of that, I have this simple css problem which I can not figure out. :-)

I am trying to shift the position of a background image by changing the class. This does not have to happen within a single html file, and so javaScript is not involved.

This is like the classic "cropped toggle button" where the hover state moves the image a set number of pixels. However, it does not seem to work in this case.

In step1.html, my html looks like this:

<div id="progress" class="progress1">
    <p>STEP 1/3&nbsp;</p>
</div>

In step2.html, my html looks like this:

<div id="progress" class="progress2">
    <p>STEP 2/3&nbsp;</p>
</div>

Note the sole change is class="progress1" to class="progress2".

My css looks like this:

#progress{
    position:relative;
    display:block;
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
    width:565px;
    height:36px;
    line-height:36px;
    margin:1em 0;
}
.progress1{
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
}
.progress2{
    background: url(../images/progressBar.png) 65px -36px  no-repeat  !important;
}
.progress3a{
    background: url(../images/progressBar.png) 65px -72px  no-repeat  !important;
}
.progress3b{
    background: url(../images/progressBar.png) 65px -108px  no-repeat  !important;
}

I have also tried add the full background declaration in the id, and only changing the position in the classes, like so: background-position: 65px -108px.

did you consider applying background-size also? to have more control — Temani Afif, Jun 20 '18 at 14:11
ah I see, specifity issue .. ID more specific than class ... remove the important from the first CSS declaration — Temani Afif, Jun 20 '18 at 14:15
The post cited in the duplicate marking has some information that is certainly related and interesting; but it does not answer my question. It's not misleading, but it's certainly roundabout. The problem is merely a misuse of selectors, which August identified in his answer. I'm marking that as the correct answer. — Parapluie, Jun 20 '18 at 15:14
A duplicate question doesn't need to answer your question ... explaining the issue is sometimes better than giviing a *non explained* answer ... what you will learn if you simply get the working code without understanding the *why*? nothing ... you will get back again here in the future with a similar issue and related to the same thing. — Temani Afif, Jun 20 '18 at 15:18
@TemaniAfif I certainly agree, and I'm not here to be lazy. I did read the question you linked, and while it provided information germane to my question, it didn't address the bad selector that I was using. I searched SO high and low for a related answer, and I think that there is a reason that the specificity question was not found. — Parapluie, Jun 20 '18 at 15:20
so in this case maybe you didn't understand the question ... because ID is more specific than Class so it will always win == this is your issue ... If you get this then you have a plenty of workaround (remove the first important, use only classes and no ID, append ID to the class selector, etc etc etc) — Temani Afif, Jun 20 '18 at 15:22
@TemaniAfif it's simply that the specificity link provided as a duplicate is not a duplicate: it is an excellent reference on the generalities of css specificity, but it at no point addresses what I was doing in practise. Anyway. I'd rather not start anything like a battle over it. That's not what SO is for. (And I do agree that August's answer should have included a "why" and not just a sample of fixed code.) — Parapluie, Jun 20 '18 at 15:37
It's not a battle but you need to understand that a duplicate question is not for addressing *your* particular issue but to address a more generic issue because if it wans't the case we won't have any duplicate because each question is very specific to each person ... Your issue is a specifity issue and the duplicate question already deal with such issue — Temani Afif, Jun 20 '18 at 15:42

August · Accepted Answer · 2018-06-20T17:15:02.437

Try this:

#progress{
    position:relative;
    display:block;
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
    width:565px;
    height:36px;
    line-height:36px;
    margin:1em 0;
}
#progress.progress1{
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
}
#progress.progress2{
    background: url(../images/progressBar.png) 65px -36px  no-repeat  !important;
}
#progress.progress3a{
    background: url(../images/progressBar.png) 65px -72px  no-repeat  !important;
}
#progress.progress3b{
    background: url(../images/progressBar.png) 65px -108px  no-repeat  !important;
}

The problem was that #progress selector was always higher specificity than .progress1 or .progress2 selector even with !important. So you need to keep the specificity on same "level" to be able to overwrite it with .progress1 or .progress2

Works! Thank you for identifying my bad selector. Temani's comment about the `!important` qualifier is also very noteworthy. — Parapluie, Jun 20 '18 at 15:16
I agree, that's why I flagged his comment as helpful and I edited my answer to include the reason. — August, Jun 20 '18 at 17:16

add class to change position background image within div without javaScript

1 Answers1