Image array in css and retrieve in HTML

Question

I want to use one class for 3 buttons but with different background-image such that each button will have its own image. I was looking to declare a background-image array in css and then retrieve the image. However as per my research, there is no array declaration in css. Is this right? If yes what alternative do I have to retrieve each image for each button?

HTML

...
...
<button class="access_item">
        <span class="access_icon">
        </span>
         Button_1
</button>

<button class="access_item">
        <span class="access_icon">
        </span>
         Button_2
</button>

<button class="access_item">
        <span class="access_icon">
        </span>
         Button_3
</button>
...

CSS

.access_item {
  display: inline-block;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none; 
}

.access_icon {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
  background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
  background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
  margin-bottom: 20px;

}

I like eating pizza thursdays · Accepted Answer · 2020-08-17 09:18:43Z

4

Use the :nth-child() selector. The CSS code will become:

.access_item {
  display: inline-block;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none; 
}

.access_icon {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;

}

.access_item:nth-child(1) > .access_icon {
  background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}

.access_item:nth-child(2) > .access_icon {
  background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}

.access_item:nth-child(3) > .access_icon {
  background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

edited Aug 17, 2020 at 9:18

answered Aug 17, 2020 at 9:09

I like eating pizza thursdays

4054 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user14015439 Over a year ago

Hey thanks, but the buttons are only taking the first nth-child. Do I have to declare in HTML as <span class="access_icon:nth-child(2)"> ?

I like eating pizza thursdays Over a year ago

I've modified it. It should work now. jsfiddle.net/r67puwLm

pedde07 · Accepted Answer · 2020-08-17 09:44:13Z

Maybe some people disagree here. But I would reach for a solution using CSS-IDs or additional CSS-Classes.

Thus you are not restricted to the nesting and the order of the buttons.

v1 Using CSS-IDs HTML:

...
<button class="access_item" id="button_1" >
        <span class="access_icon"></span>Button_1
</button>

<button class="access_item" id="button_2" >
        <span class="access_icon"></span>Button_2
</button>

<button class="access_item" id="button_3" >
        <span class="access_icon"></span>Button_3
</button>
...

v1 Using CSS-IDs CSS:

.access_item {
    display: inline-block;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none; 
}
.access_icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
}
#button_1 {
    background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}
#button_2 {
    background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}
#button_3 {
    background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

v2 Using additional CSS-Classes HTML:

...
<button class="access_item button_1" >
        <span class="access_icon"></span>Button_1
</button>

<button class="access_item button_2" >
        <span class="access_icon"></span>Button_2
</button>

<button class="access_item button_3" >
        <span class="access_icon"></span>Button_3
</button>
...

v2 Using additional CSS-Classes CSS:

.access_item {
    display: inline-block;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none; 
}
.access_icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
}
.button_1 {
    background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}
.button_2 {
    background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}
.button_3 {
    background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}

Collectives™ on Stack Overflow

Image array in css and retrieve in HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related