Help-circular div with responsive background image [closed]

closed . This question needs details or to be clearer and is not currently accepting answers.

Want to improve this question? Add details and make it clearer what problem is being solved by editing this post .

Closed 1 year ago .

improve this question

Dear, good afternoon!

I am in need of help to create a div with background image.

I did this 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 text in large resolutions the image does not scale, leaving a bench space next to it.

I would like the image to increase a bit, up to the breakpoint where I would leave another similar div side-by-side.

Thank you right now!

Author: Felipe Cristiano, 2019-08-20
Source

1 answers

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

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

In your 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, do not use style inline, just 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.

Soon, remove this style and add the your class above. As I exemplified.

Hug, I hope I helped.

 0
Author: , 2019-08-20 15:54:50