🚀 Мои услуги
Header Image
пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

Как расположить одну картинку на фоне другой

Как разместить одну картинку перед другой
Обновлено: 2023-01-15 в 15:56
Актуально на 2025 год
Просмотры: 191

Расположить одну картинку на фоне другого изображения возможно при помощи HTML и CSS. Для этого, в HTML я создаю два блочных элемента при помощи тега div и добавляю атрибут class, задав имя селектора. Особенность состоит в том, что див картинки, которая должна находиться перед фоновым изображением, размещаю внутри дива последнего.

Например, у меня есть два изображения — красный квадрат (picture1) размером 200 на 200 пикселей и жёлтый квадрат (picture2) размером 100 на 100 пикселей. Поставлена задача разместить picture2 перед picture1.

Чтобы осуществить задуманное, в HTML создаю вот такую вёрстку:

Вёрстка картинки перед картинкой

Далее, с помощью стилей я управляю вышеуказанными блоками.

.picture1 {
background: transparent url(//hoboweb.ru/img/picture1.png) no-repeat;
width:200px;
height:200px;
}
.picture2 {
background: transparent url(//hoboweb.ru/img/picture2.png) no-repeat;
position: absolute;
margin: 50px 50px;
width:100px;
height:100px;
}

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

Всем WEB!

Если материал оказался полезен и помог решить проблему, можете поддержать автора, направив камеру смартфона на QR-код.
QR-Сбер

Оцените статью:

Рейтинг: 0.0 (Голосов: 0)

Почитайте похожие материалы

Об авторе: Hobo

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

4 Comments

  1. Руслан:

    Оказывается, так просто расположить одну картинку на фоне другой при помощи CSS. Благодарю за помощь.

    1. Hobo:

      Да, ничего сложного на самом деле. CSS творит чудеса, с его помощью можно легко размещать один элемент на фоне другого.

  2. Иван:

    Надо было расположить квадрат на фоне прямоугольника в css. Спасибо, то что надо!

    1. Рад, что инструкция оказалась полезной!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

SQL - 74 | 0,325 сек. | 6.17 МБ