Setting background around image in CSS

Question

I insert an image and classified it:

<div class="first-img"><img src="images/image1.png" alt="image01" /></div>

Now I'd like CSS to set a background around this image:

.slide .first-img{
  text-align: left;
  width: 5%;
  height: 5%;
  bottom: 0;
  left: 307px;
  top: 119px;
  right: 0;
  position: absolute;
  opacity: 1;
  background: rgba(255,255,255,0.2);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
}

But what it does is placing the image right below the background. Whatever I set for padding, the image only begins once the background ends. How can I synchronize the x- and y-positions of the background and the image?

Answer 1

Two options

Just css background-image to first-img.

.first-img {
    background-image:url(images/background.jpg);
}

Or create a container to wrap the slider and place a background-image in it

<div id="wraper_slide">
<div class="first-img"><img src="images/image1.png" alt="image01" /></div>
</div>

#wraper_slide {
    background-image:url(images/55-anos-logo.jpg);
}

Answer 2

Is this what you mean?

Have a fiddle - Fiddle Link!

HTML

<div class="first-img"><img src="images/image1.png" alt="image01" /></div>

CSS

.first-img { 
    padding: 30px;
    width: 500px;
    background: url('http://www.placehold.it/500/FF0000');
}