X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Css и фон сайта
alexcandr
alexcandr
Topic Starter сообщение 2.3.2014, 23:32; Ответить: alexcandr
Сообщение #1


Бывалый
****

Группа: User
Сообщений: 278
Регистрация: 31.5.2008
Из: SPB
Поблагодарили: 109 раз
Репутация:   12  


Всем привет, помогите пожалуйста решить проблему.
Из меня верстальшик не ахти, думаю вам будет не сложно меня направить на правильный путь.
Есть картинка размером 1024*1000, ее нужно сделать фоном сайта, ну вообщем ничего сложного с одной стороны но проблема заключается в том что сам фон не зациклить и при разных разрешениях она реально растягивается и наченает все плыть.

ссылка на картинку _http://s019.radikal.ru/i638/1403/d9/bbf1cff5d519.jpg

Вобщем извращался по разному с css, последний код

Код
body {
        width: 100%;
    height: 100%;
        background: url(images/bg_fon.jpg) no-repeat center center #2f2f2f;
        background-attachment: fixed;
    overflow: auto;
    -moz-background-size:100% 100%; /* для Firefox 4+ */
    -o-background-size:100% 100%; /* для Opera 9.5+ */
    -webkit-background-size:100% 100%; /* для Safari 5+ и Chrome 4+ */
    -khtml-background-size:100% 100%; /* для Konqueror (WebKit-браузеров) */
    background-size:100% 100%; /* CSS3 свойство */


Идея проста, эта картинка должна быть фоном и не растягиваться, что б не плыло изображение. Понятно что при растягивании она будет плыть и прочее что нужно ее делать минимум 1600*900, но исходников нет, поэтому возможно есть другое решение.

Возможно сделать напривер что бы она тянулась только с правой стороны а элементы с лева оставались без изменения.

Буду благодарен за советы и помощь, заранее спасибо и удачи.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 3.3.2014, 0:26; Ответить: Geers
Сообщение #2


Старожил
******


Группа: Active User
Сообщений: 1231
Регистрация: 13.4.2011
Поблагодарили: 654 раза
Репутация:   95  


Ну так правильно, у вас стоит: background-size:100% 100%; это растягивает фон на всю страницу.
И почему повторяется везде 100%? это неправильно.

Правильней так:
Код
body {
        width: 100%;
        height: 100%;
        background: url(images/bg_fon.jpg) no-repeat center center #2f2f2f;
        background-attachment: fixed;
        overflow: auto;
}

center center можно заменить на center top

Сообщение отредактировал Geers - 3.3.2014, 0:29


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexcandr
alexcandr
Topic Starter сообщение 3.3.2014, 13:56; Ответить: alexcandr
Сообщение #3


Бывалый
****

Группа: User
Сообщений: 278
Регистрация: 31.5.2008
Из: SPB
Поблагодарили: 109 раз
Репутация:   12  


Geers, спасибо, уже лучше)

Вот только по понятным причинам низ сайта не видно, не влезает в разрешение

_http://severni.com/123/

Картинка _http://s019.radikal.ru/i638/1403/d9/bbf1cff5d519.jpg

Возможно как-нибудь сделать так что бы вся картинка помещалась без обрезания, как ее можно оптимизировать под разные разрешения?

Может ее порезать? Сами видите картинка целиковая, если ее резать и циклить то изображение не будет одним целым, будут видны изъяны и прочее.

Что посоветуете? Всем спасибо.

Сообщение отредактировал alexcandr - 3.3.2014, 13:58
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 3.3.2014, 16:35; Ответить: Geers
Сообщение #4


Старожил
******


Группа: Active User
Сообщений: 1231
Регистрация: 13.4.2011
Поблагодарили: 654 раза
Репутация:   95  


Цитата(alexcandr @ 3.3.2014, 13:56) *
Geers, спасибо, уже лучше)

Вот только по понятным причинам низ сайта не видно, не влезает в разрешение

_http://severni.com/123/

Картинка _http://s019.radikal.ru/i638/1403/d9/bbf1cff5d519.jpg

Возможно как-нибудь сделать так что бы вся картинка помещалась без обрезания, как ее можно оптимизировать под разные разрешения?

Может ее порезать? Сами видите картинка целиковая, если ее резать и циклить то изображение не будет одним целым, будут видны изъяны и прочее.

Что посоветуете? Всем спасибо.

Данный фон не получится полноценно обрезать и растянуть.
Возьмите лучше бесшовную текстуру, например тут:
http://subtlepatterns.com/tileable-wood/
http://subtlepatterns.com/wood-pattern/
http://subtlepatterns.com/purty-wood/
И вставьте верхние и нижние элементы в фотошопе с прозрачным фоном.
Потом чтобы было по углам затемнение, применяете к body css свечение:
Код
box-shadow: 0px 0px 15px #FFFFFF, 0px 0px 15px #000000 inset;
Тут играетесь с цифрами и цветами.

Итоговый код должен получится примерно таким:
Код
body {
        width: 100%;
        height: 100%;
        background: url(images/bg_fon.jpg) no-repeat center center #2f2f2f;
        background-attachment: fixed;
        overflow: auto;
        box-shadow: 0px 0px 15px #fff, 0px 0px 15px #000 inset;
}


background-attachment: fixed;
overflow: auto;

Это можно тогда убрать с кода.

Чтобы два рисунка отоброжались вверху и низу, для вернего рисунка надо присвоить стиль например .top
И в css прописать:
Код
vertical-align: top;
а для нижнего соответственно bottom

В данном случае, надо создать ID блок для страницы, которая будет охватывать все внутри body.
Например так:
Код
<body>
<div id="page">
Тут содержимое всего сайта
</div>
</body>

А в css соответственно:
Код
#page {  
        width: 100%;
        height: 100%;
        background: url(images/bg_fon.jpg) no-repeat center center #2f2f2f;
        background-attachment: fixed;
        overflow: auto;
        box-shadow: 0px 0px 15px #fff, 0px 0px 15px #000 inset;
}


Думаю разберетесь)

И есть еще вариант:
Код
body  {  
        width: 100%;
        height: 100%;
        background: url(images/bg_fon.jpg) no-repeat center center #2f2f2f;
               -moz-background-size: cover;
                background-size: cover;;
}


Сообщение отредактировал Geers - 3.3.2014, 16:40


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexcandr
alexcandr
Topic Starter сообщение 3.3.2014, 16:46; Ответить: alexcandr
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 278
Регистрация: 31.5.2008
Из: SPB
Поблагодарили: 109 раз
Репутация:   12  


Geers, спасибо огромное за помощь. но заказчик хочет именно этот рисунок))) Говорил что косяк с версткой будет, но вы сами понимаете (нам дизайнер нарисовал, сказал что все просто, ну обычное дело)))) да и меню уже сделанно под этот фон.
Нашел я исходник этого фона, вот он как выглядит
_http://s016.radikal.ru/i335/1403/75/3f0e552fd80a.jpg
разрешение 1300*1300
Теперь думаю сделать так: порезать его на три части, шапка-контент-футер, зациклить по бокам черным цветом если разрешение больше 1000 px будет, вроде не особо будет заметно перехода.
Шапка останется как и есть, футер тоже, а контент будет повторяться. В общем понимаю что это не есть гуд и будут видны небольшие артефакты, но больше ничего в голову не приходит(.
Спасибо за помощь. Если есть идеи по новым вводным данным, то выслушаю) Удачи.

Сообщение отредактировал alexcandr - 3.3.2014, 16:58
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Чем сжимать картинки для сайта без потери качества
1st-finstep.ru - Заработок в сети и методы продвижения сайта
15 komarik_vlad 1514 Сегодня, 12:05
автор: x64
Открытая тема (нет новых ответов) Нужен шаблон сайта. Джумла. игры
1 pix87 502 Вчера, 20:54
автор: Yepperoni
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНе повлияет ли на позиции сайта?
Если убрать контент
12 maxg5 1329 14.12.2017, 21:11
автор: alexandrrr
Горячая тема (нет новых ответов) Качественный копирайт и наполнение Вашего сайта
Подходи, торопись, покупай живо...
307 DroBit 86396 14.12.2017, 19:03
автор: Fox
Открытая тема (нет новых ответов) Тренд сайта по сравнению с аналогами, новый параметр в Яндекс Вебмастере
7 0alex1 1500 14.12.2017, 14:03
автор: coremission


 



RSS Текстовая версия Сейчас: 17.12.2017, 14:33
Дизайн