Как реализовать это?

Question

[Mansur05]

Необходимо реализовать этот блок. На фоне изображение (Горы и солнце на белом. Для наглядности ограничил направляющими в фотошопе). У "заголовок" отступ от верхнего border 260px, неужели через padding это сделать? А как потом с мобильной версией? Может есть реализация с бутстрапом?



Текущий код:

<main>
    <div class="container text-left">
        <div class="main__content">
            <h1 class="main__title">Заголовок</h1>
            <p class="main__text">Здесь будет текст</p>
            <button class="main__button">Заказать</button>
        </div>
    </div>
</main>

На main пробовал вешать background:

main {
    background: url("img/main.png") no-repeat;
    background-size: cover;
}

Результат не тот что на макете.

Answer 1

[Шохрух Шаймардонов]

Я бы сделал так:
Блоку даем дисплей: флекс.
Вертикальное центрирование элементов
Марджин для Заголовок и Здесь будет текст
И чтобы пиксель-перфект был поиграемся с лайн-хэйт у Заголовка

Answer 2

[Арсений Матыцин]

1. Вешать надо на контейнер. Если же main на странице несколько — бегом читать документацию.
2. Позиционировать либо отступами (да да, padding или margin), либо, скажем, флексами.
3. И точно так же позиционировать на мобилке под запросы. При этом конечно, оптимальнее mibile-first подход.

Ну и чисто от меня — пикчу можно сделать gif без фона и спозиционировать справа. А фон оставить hex-ом/rgb, если правильно подойти к вопросу, то качество будет хорошее, и при этом весить меньше. Правда от лесенки трудно будет избавиться. Под пикчей я подразумеваю именно горы и солнце.

Comments

[xdevelx]

пикчу можно сделать gif без фона

Я надеюсь, это был сарказм.

[Арсений Матыцин]

xdevelx, конечно же нет.
Но в целом я думаю не так уж и зазорно такое не знать. GIF обладает восхитительным потенциалом для решения подобного рода проблем, позволяя при полном попадании в пиксельную сетку и манипулируя цветами — там, где алгоритмы сжатия jpeg или png дадут лесенку и блюр, получить четкую границу и при этом изображение весящее байты. В примере выше потребуется скорее всего большой размер и из-за наклонной линии (хорошо, что в 45 вроде градусов) при размере 900 на 900 пикселей в gif можно получит пикчу примерно 3-6 килобайта. Да, с прозрачностью.

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

Поспорить может разве что SVG.

Рекомендую почитать про старые добрые технологии работы с изображениями, хотя бы у тех же технологов Лебедева.

PS: чтобы оперировать актуальными цифрами создал в ФШ и люстре 2 доски по 900 на 900 и нанес 2 параллельных прямоугольника. При экспорте получаю почти идентичные цифры: 3,8 килобайта гифка и 4 килобайта svg. Разницы читай нет, SVG выиграет только потому что гребенка при отрисовке будет зависеть не от разраба, а устройства пользователя.

[xdevelx]

Арсений Матыцин, Дело же не совсем в размере, gif при адаптиве на малых экранах и тем более retina (а сейчас это почти все) будет выглядет печально.
illustrator много лишнего добавляет в svg. После svgo 4kb могут стать раза в 4 меньше.

[Арсений Матыцин]

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

Answer 3

[Антон Усачев]

Answer 4

[historydev]

background-size: cover;

- растягивает картинку на весь блок, а в вашем случае скорее нужно

background-size: 100% auto;

значение.