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

Question

Анатолий @Tolly

CSS

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

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

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

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

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

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

Подписаться 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

+1 ещё

Простой
Daysi UI — изменить цвет, icon навигационного меню?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать так, чтобы содержимое defs работало?
- 1 подписчик
- вчера
- 43 просмотра
0

ответов
CSS

Простой
Как удалить все префиксы из css?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 05 мая
- 85 просмотров
1

ответ
CSS

Простой
Как создать нормальный размер картинки на php?
- 1 подписчик
- 05 мая
- 67 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Галерея через сборку строки JS не позиционируется?
- 1 подписчик
- 05 мая
- 110 просмотров
0

ответов
CSS

Простой
Как сверстать не стандартный макет?
- 1 подписчик
- 04 мая
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- 04 мая
- 75 просмотров
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- 04 мая
- 38 просмотров
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 03 мая
- 95 просмотров
0

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

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Реализация LSTM и CNN моделей нейронной сети в Python

08 мая 2024, в 00:27

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

Помочь настроить captive portal

07 мая 2024, в 23:46

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

Программирование дронов ROS, Python

07 мая 2024, в 23:32

1200 руб./в час

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 сделать отступ снизу, но чтобы картинка отображалась полностью?

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

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

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