Чтобы ваш веб-сайт выглядел круто, HTML-коды с фиксированным фоном тела могут позволить вам окончательно отполировать ваш контент. Использование этих тегов CSS дает вам полный контроль над вашими фоновыми изображениями.
CSS и крутые HTML-коды с фиксированным фоном
Создание каскадных таблиц стилей было таким же чудесным для веб-дизайнеров, как нож для хлеборезки. Внезапно все аспекты веб-страницы можно было контролировать с точностью до пикселя, и, что еще лучше, можно было контролировать представление фоновых изображений. Определив свойство «фон» в элементе «тело» таблицы стилей, внезапно усугубление мозаичного изображения было решено:
body { background-image: url(YourBackGround.jpg);
цвет: #EEEEEE; цвет фона: #FFFFFF; }
Больше, чем просто изображения
Очевидно, что в этом есть нечто большее, чем просто название изображения. На самом деле определение BACKGROUND состоит из нескольких частей:
- Фон — это сокращение для всех свойств фона, если вы не хотите определять их все.
- Background-attachment — либо фиксированное, либо прокручиваемое, что определяет, будет ли фоновое изображение на странице (или ячейка таблицы или текстовый блок) перемещаться вместе с блоком или нет при прокрутке страницы вверх или вниз.
- Фоновый цвет — это не требует пояснений, хотя CSS улучшает HTML, позволяя шестнадцатеричный, RGB или даже просто синтаксис («красный») определять цвет .
- Фоновое изображение — это относительная ссылка на изображение, которое будет размещено кодом CSS.
- Background-position — это качество позволяет размещать изображение в любом месте на странице — вы больше не ограничены началом в верхнем правом углу! Используя проценты, изображение можно разместить именно там, где этого требует макет.
- Фоновое повторение. После того, как изображение размещено, вы можете определить, будет ли оно повторяться вообще, и если да, то будет ли оно повторяться по горизонтали, вертикали или по обоим направлениям (используя эффект «плитки» старой школы).
Фоновое кодирование настоящего ниндзя
Есть несколько способов установить все эти свойства в CSS. Один из способов — определить каждое качество по отдельности:
<divstyle="background-image:url(/harddrive/YourGraphic.jpg); background-repeat:no-repeat; background-attachment:scroll; background-position:45%70%;> </div>
Однако упомянутая выше «стенография» делает это еще проще, поскольку каждое качество можно определить одно за другим, просто вызвав тег «BACKGROUND». Например, приведенный выше код можно было бы записать в одну строку:
<divstyle="background:url(жесткий диск/YourGraphic.jpg)no-repeatscroll45%70%;>
Это то, что известно как «правильно сформированный» код, и если он определен в вашей таблице стилей, вы можете получить еще больший контроль над всем вашим сайтом.
Выучить больше
Для получения дополнительной информации просмотрите другие статьи о CSS и HTML на LoveToKnow, и вскоре ваш веб-сайт будет выглядеть именно так, как вы хотите, спереди и сзади.