Какого размера должен быть фон для сайта?
10-09-2014 15:04
к комментариям - к полной версии
- понравилось!
Вопрос можно ещё поставить так: какой оптимальный размер изображения для фона сайта или подстройка размера картинки под разрешение экрана.
☑Задача установить фон сайта в виде одной фотографии , т.е. без повторений.
Приблизительно так:
body{
background-image: url (ссылка на изображение);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0%
}
Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.
Можно взять максимальный размер фото 1920x1200 этого достаточно для большинства мониторов.
Всё большую популярность стали приобретать "резиновые" сайты, которые создаются путём использования
- @Media,
- относительных величин.
Благодаря им теперь не нужно искать оптимальную ширину сайта. Из всего многообразия types и Queries, как правило, внедряют print и width.
☑Макет резинового сайта
<style>
main { /* основное содержимое */
position: relative; /* боковая колонка перемещается в рамках основного содержания */
margin: 0 auto; /* сайт располагается по центру экрана */
max-width: 1200px; /* резиновая, растягивается до значения в 1200px */
padding-right: 310px; /* = боковая колонка + отступ в 10px */
}
aside { /* боковая колонка */
width: 300px; /* фиксированная, не меняется с изменением размера окна браузера */
position: absolute; top: 0; right: 0; /* прижата к верхнему правому углу */
}
</style>
<main>
<aside>боковая панель</aside>
</main>
Резиновая верстка сайта с плавающей боковой колонкой
<style>
main {
margin: 0px auto;
max-width: 1200px;
padding-right: 310px;
}
.pravo { /* боковая колонка прижата к правому углу */
float: right;
margin-right: -10px;
}
aside {
width: 300px;
position: fixed; /* перемещается вместе с прокруткой страницы */
top: 9em; /* = шапке сайта */
z-index: 101;
}
</style>
<main>
<div class="pravo"><aside>боковая панель</aside></div>
</main>
Подробнее с примерами смотрим здесь - http://shpargalkablog.ru/2012/09/rezinovyi-sajt.html#maket
вверх^
к полной версии
понравилось!
в evernote