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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


Всем привет, помогите пожалуйста решить проблему.
Из меня верстальшик не ахти, думаю вам будет не сложно меня направить на правильный путь.
Есть картинка размером 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


Ну так правильно, у вас стоит: 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, Zoya83
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexcandr
alexcandr
Topic Starter сообщение 3.3.2014, 13:56; Ответить: alexcandr
Сообщение #3


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


Цитата(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)
Zoya83
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexcandr
alexcandr
Topic Starter сообщение 3.3.2014, 16:46; Ответить: alexcandr
Сообщение #5


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
 14 Aloof 3383 23.4.2024, 13:50
автор: Vmir
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
 39 2Index 6737 22.4.2024, 16:16
автор: 2Index
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыSiteAnalyzer - бесплатная программа для аудита и анализа сайта
 77 Chaser 74277 9.4.2024, 11:36
автор: Chaser
Открытая тема (нет новых ответов) Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта
 0 Alex-777 949 7.4.2024, 18:05
автор: Alex-777
Горячая тема (нет новых ответов) Продвижение молодого сайта
 30 maxmer 6599 26.3.2024, 21:49
автор: c4p1t4l15t


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 5:59

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet