Help - Circular DIV with responsive background image

Question

Dear friends, good afternoon!

I need help to create a div with background image.

I made that code:

.this-image{
    //border: 2px solid #AD235E;
    border-radius: 150px;
    width: 200px;
    height: 190px; 
    background-position: center;
    background-color: #C0C0C0;
}
section{
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

<section>
  <article>
    <div class='this-image' alt="título um" style="background-image: url(img/test.jpg);"></div>
  </article>
</section>

but when I test at large resolutions the image does not scale, leaving a bench space beside.

I would like the image to increase a little, to the point of interruption where I would leave another similar div side-by-side.

Thank you in advance!

Answer 1

Felipe, what you need exists in CSS3 and is called: background-size.

The background-size property of CSS specifies the size of the background images. The image size can be fully or only partially compressed in order to preserve its ratio.

in his class .this-image consider using:

background: url(img/test.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Another thing, don’t use inline style, like you did here: <div class='this-image' alt="título um" style="background-image: url(img/test.jpg);"></div> This is not good practice.

So, remove this style and add it in your class above. As I exemplified.

Hug, hope I helped.