Как в background сделать отступ снизу, но чтобы картинка отображалась полностью?

Question

Анатолий @Tolly

CSS

Как в background сделать отступ снизу, но чтобы картинка отображалась полностью?

Как сместить картинку снизу на 20px, но чтобы картинка отображалась полностью?
Например вот так:

background-position: bottom 20px center;
background-size: contain;

Картинка уходит выше, и ее не видно.
PS. Использую двойной background, вначале картинка, потом фон:

Вопрос задан более трёх лет назад
930 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 2

5 комментариев

Анатолий @Tolly Автор вопроса

Снизу идет текст, но не совсем сразу! Вначале идет так (дополнил пример):
snippet
Что Вы имеете ввиду под padding-bottom я не совсем понял, поясните мысль.

Написано более трёх лет назад
Даниил Ульянов @qDanny

Анатолий, padding - внутренний отступ, а padding-bottom - внутренний отступ снизу соответственно.
(От слова bottom, что значит дно)

Написано более трёх лет назад
Даниил Ульянов @qDanny

Анатолий, Кстати, очень интересная задумка. Перекопировал Ваш код и выяснил, что фотографии постоянно разные. Это впечатляет)

Написано более трёх лет назад

Даниил Ульянов @qDanny

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="style.css">
   
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class = "bg">
        <p class = "bg__desc">123</p>
    </div>
</body>
</html>

/*main part start*/
body{
    margin: 0;
}

*{
    box-sizing: border-box;
}
/*main part end*/

/*bg start*/
.bg {
    width: 100%;
    height: 90vh;  
    background: url(https://loremflickr.com/g/200/300/paris,girl/all)center no-repeat, linear-gradient(45deg, blue, red);
    background-size: contain, auto;
    position: relative;
    
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.bg::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 24px;
    border-radius: 24px 24px 0 0;
    background-color: #fff; 
}

.bg__desc{
    font-size: 50px;
    padding-bottom: 5%; /*Тут также можно воспользоваться margin-bottom. Эффект будет один и тот же*\
}
/*bg end*/

https://codepen.io/workcode/pen/RwpwbPY

Воспользовался флексами. Все робит.

Написано более трёх лет назад

Анатолий @Tolly Автор вопроса

Даниил Ульянов, я прекрасно знаю что такое padding border margin outline...
Я сказал, что не понял что вы имеете ввиду по padding
Теперь понял, текст на самой картинке. Нет мне не нужен текст на самой картинке, вопрос был не про это.

Написано более трёх лет назад

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- 17 часов назад
- 44 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- вчера
- 137 просмотров
0

ответов
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- вчера
- 204 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 98 просмотров
1

ответ
CSS

Простой
Как заменить псевдокласс has?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
CSS

Простой
Обязательно ли создавать контейнер?
- 1 подписчик
- 14 дек.
- 86 просмотров
1

ответ
CSS

Простой
Как добиться линий, как на скрине?
- 1 подписчик
- 14 дек.
- 143 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Делаю видеоплеер и в полноэкранном режиме почему-то не видит div с моими контролами?
- 1 подписчик
- 13 дек.
- 80 просмотров
2

ответа
CSS

Простой
Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?
- 1 подписчик
- 13 дек.
- 140 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как добавить анимацию div?
- 1 подписчик
- 13 дек.
- 94 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Модернизация форума на xenforo

18 дек. 2024, в 11:03

5000 руб./за проект

Разработка программы для Windows

18 дек. 2024, в 10:44

130000 руб./за проект

Доработка веб-ПО на rust + vue.js

18 дек. 2024, в 10:02

7000 руб./за проект

Answer 1 · 2021-05-05 15:57:47

Высота блока постоянно разная, но я думаю увеличить высоту картинки на 20px.
Затем сдвинув картинку снизу на 20px. Можно будет увидеть 100% размер.

Answer 2 · 2021-05-05 15:53:13

Если Вы хотите оттолкнуться снизу, чтобы поставить будущий текст в то положение, которое хотите, воспользуетесь этим:
padding-bottom: 20px;

Answer 3 · 2021-05-05 15:48:44

Если вам нужно свободное пространство под картинкой, то уменьшите саму картинку. Поскольку у вас два background, по-другому управлять размером не получится.

Как в background сделать отступ снизу, но чтобы картинка отображалась полностью?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт