Как изменить фон?

Question

[Mary Солнечная]

Привет, девелоперы! Начала задавать по вопросу в день. прошу простить. уж очень мало опыта :)))
Раннее мною задавался вопрос - "Как достать паттерн?" т.к. у меня он присутствовал в макете (даже целых два).
Вот сам макет: https://yadi.sk/d/CLT6jQvXjQFYD (psd)

Что сделала я:
1) (Правильно ли???) убрала все слои в фш, оставив только сам фон
2) сохранила как картинку
3) вставила в css файл:

4) получилась жуткая кракозябра
:
Видимо я упустила очень важные детали. Выглядит очень некрасиво. Как сделать так, чтобы отображение фона было другим? Насколько я понимаю - вот такого итога быть не должно.

P.S признаться честно, некоторые вещи тут мне даются трудно, особенно position и float, с ними просто воюю.
Буду оооочень благодарная за вашу помощь! Всем добра и бобра!

Answer 1

[Ivanq]

В стили нужно дописать

body {
    background-size: cover;
}

Answer 2

[Александр Таратин]

https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Answer 3

[Андрей Федоров]

Безусловно упустили детали.

Начнем с того, что у вас 3 фона должно быть.
1. Основной цвет.
2. Фон образующий затенение слева.
3. Фон образующий затенение справа.

Если вас не интересует работа сайта в устаревших браузерах рекомендую использовать background-image: linear-gradient();
Если поддержка таких браузеров все же важна, нужно создать две картинки в формате png высотой 1px и в них задать градиенты от прозрачности к темно-синему для правого затенения и от темно-синего к прозрачности для левого.
Дальше комбинируя свойства background-position и background-repeat добиться результата.
Обратите так же внимание, что устаревшие браузеры не поддерживают несколько фонов, указанных через запятую - этот вопрос придется решать в html.

Другое решение основано на обычной или внутренней тени - box-shadow или box-shadow ... inset. Однако тут вам придется решать как скрыть тень сверху и снизу, но оставить справа и слева. Это можно сделать с помощью z-index, margin или position.

codepen.io/aliencash/pen/YyNXby

Answer 4

[chuchas]

вы сохранили весь фон в одну картинку, вместе с белой подложкой, а нужно отдельно сохранить фон для верхнего, синего блока, и отдельно для блока с черным, "простроченным" фоном. это если по-быстрому.

Answer 5

[Дмитрий Пыркин]

Совет насчет Трех слоев хорош, но я бы разделил на два верхних и нижний.
А что бы фон выглядел норм то надо сделать так:

body{
background:url(img.png) no-repeat center;
background-size:cover
}

Comments

[Mary Солнечная]

когда после адреса картинки приписываю no-repeat center - фон исчезает

[Дмитрий Пыркин]

пример можно?