CSS, как настроить background сайта?

Question

[Martyer]

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

Answer 1

[nowm]

Непосредственно после тега BODY добавьте DIV с абсолютным позиционированием, отрицательным z-index и сокрытием overflow и задайте ему высоту в половину сайта и ширину 100%. Внутрь DIV-блока вставьте картинку (обычным тегом IMG) и сделайте ему минимальную высоту 100% и минимальную ширину — тоже 100%. Для псевдоэлемента :after DIV-блока задайте блоковое отображение, абсолютное позиционирование, и высоту, достаточную для вашего «помаленьку». Сделайте ему 100% ширины и bottom: 0, а так же градиентный фон от белого до прозрачного, направленный вверх.

По-моему, это хорошая и понятная инструкция. Если нужен готовый код, есть смысл заглянуть на freelansim.ru — потому что есть ньюансы во время реализации.

Comments

[Martyer]

большое Вам спасибо) всё понятно обьяснили)

Answer 2

[Jack OXO]

Используй отрицательные значения background-position для фона, а поверх наложи градиент от белого цвета к прозрачному и все

Comments

[Martyer]

я Вам не очень понял. При отриц. значении половина картинки уйдёт выше экрана, и видно её не будет?

[Jack OXO]

Да она уедет

[Jack OXO]

Вот сделал попроще - codepen.io/anon/pen/XJpvQq
картинку только вставьте нужную и наложите градиент

[Jack OXO]

Думаю идея ясна и не надо никаких div ;)

Answer 3

[Сергей Карвасарный]

все гениальное просто. background-img: Сюда пихаем картинки и предварительно сделать в фотошопе чтобы нижний край плавно перетекал в белый цвет и еще берем тег background-color: #fff; Вот и все. 100 раз так делал) ну или можно совместить все в 1 теге background