Блог

Я пытаюсь создать границу вокруг раздела, как показано на изображении, но не уверен, как можно переместить его на несколько пикселей из основного поля. Вот что я пробовал, но это не совсем то, что я хочу.

HTML:

 <section class="section-steps row outside" id="cities">

<div class="row">
    <h2>Our Values</h2>
</div>
<div class="row js--wp-1 our-values-image-container">
    <div class="col span-1-of-3 box">
        <h3 class="font-weight-bold">Animal Welfare</h3>
        <div class="img-background">
            <img src="resources/img/animal_welfare.jpg" alt="Animal Welfare">
        </div>
    </div>
    <div class="col span-1-of-3 box">
    <h3 class="font-weight-bold">Food Safety</h3>
        <div class="img-background">
            <img src="resources/img/food_safety.jpg" alt="Food Safety">
        </div>
    </div>
    <div class="col span-1-of-3 box">
        <h3 class="font-weight-bold">Sustainability</h3>
        <div class="img-background">
            <img src="resources/img/Sustainability-S.JPG" alt="Sustainability">
        </div>

    </div>

</div>

</section>
 

CSS:

 .img-background{
    background: #ffd203
}
.our-values-image-container{
    padding: 0px 40px;
}
 

Вот результат:

[! [введите описание изображения здесь] [1]][1]

[! [введите описание изображения здесь] [2]][2]

Здесь вы должны использовать некоторые свойства CSS:

1. Свойство переполнения, которое может помочь вам, если текст выходит из <div> контейнера или контейнера.
2. Я вижу, что вы можете захотеть создать фигуру в качестве фона для своего изображения, поэтому свойство shape поможет вам.

После импорта изображения свойство overflow становится важным здесь, если вы хотите писать на изображении.

3. Теперь position: absolute; сделайте так, чтобы ваше изображение стояло над фигурой. Это поможет вам: Расположить

Я советую вам использовать классы и идентификатор при использовании CSS.

Просто добавьте тень коробки к изображению

 * {
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

img {
  width: 500px;
  box-shadow: -30px -30px 0px yellow;
} 

 <img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">