How to add picture to every panel?

Question

I am using the panels module and the mini panels modules.

I have mini panel with two section (left and right). For my design, I want to add a picture on the left side of each section. These pictures are not supposed to come from any node or content, they are just pictures for design purpose only.

How can I do that? If you suggest CSS, I will be happy to understand how?

I am a newbie, and building my first Drupal site, so I will appreciate any help.

Thanks.

Answer 1

All your panels have a common class. Probably .panels. You need to see if your left panels also have a common class, probably .panel-left or something. You can use your browsers element-inspector to see this. It will show you something like this (simplified example) if you select your node that has panels:

<div class="panels">
  <div class="panel-left">
    content
  </div>
</div>

This gives you a clue where to set your background in CSS.

.panels .panel-left {
  background:url('path/image');
}

You need to find classes that the elements you want to style have in common, but are unique enough so that you style only those.