Как правильно сверстать блок?

Question

[dmitriu256]

Как правильно сверстать синий фон у картинки?

Вариант 1

<section class="main">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="main-text">
                    <span class="main-text__subtitle">Welcome to Dental Clinic</span>
                    <h1 class="main-text__title">Professional,Warm and friendly Dental care for you</h1>
                    <p class="main-text__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio in et, lectus sit lorem id integer.</p>
                    <button class="button">Make Appointment</button>
                </div>
            </div>
            <!-- /.col-6 -->
            <div class="col-6">
                <div class="main-img">
                    <img src="img/main/dental-main.png" alt="Dental-Main">
                </div>
            </div>
        </div>
    </div>
</section>

.main
  position: relative
  padding: 191px 0 101px 0
  border: 2px solid yellow
  background: $title-color-light
  z-index: 1
  overflow-x: hidden
  &::before
    display: block
    position: absolute
    content: ''
    width: 740px
    height: 740px
    top: 0
    right: 0
    margin-right: -130px
    margin-top: -101px
    background: $active-color
    border-radius: 50%
    z-index: -5

Вариант 2
Вместо использования main::after повесить два слоя (картинка + синий круг) фоном к секции.

.main
  position: relative
  padding: 191px 0 101px 0
  border: 2px solid yellow
  background: $title-color-light url("../img/main/Group 415.png") top 50% right 0 no-repeat
  background-size: 45%

Comments

[FeST1VaL]

Лучше делайте песочницу. За вас это никто не будет делать, только если кому то просто нечего делать)

Answer 1

[Roman Serdyuk]

Как вариант, для .main-img задать псевдоэлемент и спозиционировать его абсолютно.