# Component with background image : SOLVED!

**URL:** <https://forum.pinegrow.com/t/component-with-background-image-solved/3461>\
**Category:** Beginners\
**Tags:** css\
**Created:** [October 23, 2019, 10:40pm UTC](https://forum.pinegrow.com/t/component-with-background-image-solved/3461 "2019-10-23T22:40:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [October 23, 2019, 10:40pm UTC](https://forum.pinegrow.com/t/component-with-background-image-solved/3461/1 "2019-10-23T22:40:19Z")

</div>

Diving into components and the very first thing i wanted to do doesn’t work as i want it to.

i have a component that is nothing more than a bunch of `<a>` elements wrapped in a `<p>` which is then contained by a `<div>`

i want to style it by putting a background image onto the `<div>` and making all the link text transparent so when you click on the background image, you are actually activating the link.

you can see how it works at [ranttit.net](http://ranttit.net)

the problem is how can i have multiple instances of this component in my project when the image is defined in the CSS which applies to ALL instances of the component?

i don’t see a way to make a rule in my CSS file “editable”, unless i’m missing something (which i probably am).

anyone have thoughts on this?

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [October 24, 2019, 2:04am UTC](https://forum.pinegrow.com/t/component-with-background-image-solved/3461/2 "2019-10-24T02:04:03Z")

</div>

SOLVED!

under editable areas for the defining component, there is a box labeled cryptically enough

- Bck. image

![Capture](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/00a0b44fa314f30fe15b73ea27c795eb111f06a3.jpeg)

this presents a file browser option under each instance of the component where you can choose a different file for the background image linked in the CSS.

 ![Capture](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fcadd03c8758615526491fa6925e0413ad0291f0.jpeg)

now when i change out the list of links they will all line up on top of the new image to make them pseudo clickable.

PG is like a magic, i’s tell ya.

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [October 24, 2019, 2:21am UTC](https://forum.pinegrow.com/t/component-with-background-image-solved/3461/3 "2019-10-24T02:21:05Z")

</div>

oh, so close… i just noticed this creates an inline style to override the stylesheet.

not really what i was hoping for, but it at least gets the job done.

is there still something i’m missing?

should i create another style sheet for each instance or something? what would be the point of that anyway?