How can I identify the ID of a specific DIV so I can add background image to it?

Question

I bought a Joomla template but I don't have a support subscription anymore so I need to modify the styling myself.

1. I want to change the background of the highlighted "violet" on the left side, with an image background.
2. On the left side of the image are the codes.
3. I want to put a CSS override putting an image background.

enter image description here

Answer 1

The "violet" div has no id; but its parent does. You do not need an Id to match an element; a unique class / class combination will be enough. To be on the safe side you could select by parent id followed by the child classes:

#gkHeader > .box.mediumspaces.greybg {
  background-image:url(someimage.jpg);
  background-repeat: no-repeat;
}

• #gkHeader : the item whose id is gkHeader;
• > : the immediate children (direct children of the previous selector)
• .box.mediumspaces.greybg : with all the classes separated by dots

Should your child divs have no distinctive class combinations that will allow you to select one, you could still achieve this with a positional selector:

#gkHeader > div:nth-child(3)

where:

• #gkHeader > div selects all direct descendants of <div id="gkheader">
• :nth-child(3) selects the third item in the collection

please mind the spaces,

• .class1 .class2 is selecting an item with class="class2" contained in another with class="class1";
• .class1.class2 is selecting an item with class="class1 class2"

If your rule does not work, but you see it in the browser inspector, there may be a rule with a more relevant selector; if so, be more specific in your selector (add more parents, or use ids instead of classes), or add !important after the style