Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url атрибута background, который в свою очередь добавляется к селектору BODY.
Общий синтаксис добавления фона следующий.
BODY
Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и графический файл с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif). При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона. Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальный атрибут background, как показано в примере 1.
Пример 1. Добавление фона
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
Фон
.
В данном примере фон веб-страницы задан серым цветом, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.
Урок 28. Неподвижный фон, прописанный с помощью стилей CSS. Размножающаяся и не размножающаяся картинка фона
При установке неподвижной картинки фона под таблицу, в которой у нас будет располагаться текст и прочая полезная информация, создаётся следующий эффект: при прокрутке таблицы с текстом фон под ней остаётся неподвижным, а не сдвигается вместе с таблицей. Как здесь: здесь
Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах. Обычно эффекта неподвижной картинки фона добиваются с помощью постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением .css
Есть несколько способов установить то, что нам нужно.
Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):
В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:
В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).
Примечание:Если у вас нет документа стилей css, то вам необходимо создать его, как указано в Уроке 8 — и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.
Итак, вот какие параметры мы задаём при помощи стилей:
— background-image: url(адрес картинки фона); — прописываем адрес нашей фоновой картинки 1280 на 1024 px.
— background-attachment: fixed; — задаём фону указание оставаться фиксированным, то есть, неподвижным.
— background-repeat: no-repeat; — задаём фону указание не размножаться.
— background-position: top; — задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.
Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:
Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: ПРИМЕР (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).
Попробуем поставить маленькую картинку, которая будет автоматически повторяться и заполнять всё пространство страницы, образовывая узор фона. Вот эта картинка:
При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:
Здесь мы задали только параметр: background-attachment: fixed; — то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке «не размножаться» — она должна у нас размножиться на весь экран.
Получится вот что: ПРИМЕР
Попробуем установить фоновую картинку с одной стороны, а таблицу с текстом и картинками на странице расположить с противоположной стороны, чтобы она не загораживала собой фоновую картинку. Для этого пропишем в документе css следующее:
— background:#e0ddd8 url(адрес фоновой картинки) — цвет под фоновой картинкой — бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).
— no-repeat — картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров — Робертом Дювалем).
— fixed — фон зафиксирован, то есть неподвижный.
— left top — выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта — слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете:
HTML\CSS → Как зафиксировать фон при прокрутке
С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокрутке. Значение свойства:
scroll — фон прокручивается вместе с содержимым (по умолчанию). fixed — фон не прокручивается, зафиксирован на одном месте.
У шапки блога на Blogger id=’header-inner’. Зная это мы можем дополнить стиль CSS, скажем так:
#header-inner h1 < overflow: hidden; line-height: 200px; /* текст по центру по вертикали */ text-align: center; /* текст по центру по горизонтали */ position: relative; > #header-inner h1:before < content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif); >#header-inner h1:after < content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg); position: absolute; transform: translate(100px, 0px); /* смещение вправо */ >
Для варианта, когда присутствует изображение на вкладке «Дизайн» в блоке «заголовок» применим CSS наложение:
#header-inner < position: relative; >#header-inner:after < content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif); position: absolute; top: 20px; /* свои значения */ left: 50px; /* свои значения */ >
Смена изображения заголовка в зависимости от времени суток
Думаю этот эффект заслуживает внимание: посетителю показывается картинка, которая соответствует часу, когда он зашёл на ресурс.
Перед добавляем скрипт:
Количество изображений (image[номер]=»URL_изо») вы можете выбрать любое, но не более 24. Строка «if (hours>0) » говорит, что первый рисунок (alea=0;) будет показан в течении четырёх часов с 0:00 до 4:00. Далее по аналогии.
Например, картинка авто меняется с каждым четвёртым часом.
Смена фона при обновлении страницы
Показывается случайная картинка из списка при обновлении страницы. Перед
вносим:
Как сделать, чтобы фон менялся при смене месяца
72 комментария:
ольга Я пока сделала себе статичную картинку через Пикасу, и ширину увеличила за счет шаблонов блоггера. Статья понятная,время появится — буду пробовать NMitra Оль, вы не представляете, как я стремилась к изложению в доступном виде. Рада, что мне это удалось))) Jendosimo Отличный блог! Спасибо за советы. NMitra Добро пожаловать! belinee Все мега доступно! Спасибо большое! То что нужно! NMitra Рада помочь! Шальнова Елена Сергеевна А как можно вставить картинку — логотип с прозрачным фоном в левый верхний угол блога? Не в заголовок, а еще левее? NMitra Добавьте новый блок: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html и в созданном гаджете укажите необходимый URL
Только в свойства добавьте #Image999 Петровна Добрый день! Будьте добры, подскажите пожалуйста, как можно разместить много картинок на одной страничке, чтобы посетители могли их скачивать?
2. Как можно сделать так, чтобы при нажатии на картинку она увеличивалась и приводила на другую страницу, где она крупным планом?
3. И пробовали ли Вы когда нибудь сделать анимацию картинки?
Вот у меня много картинок, и мне хотелось бы их выложить на сайт, но, чтобы обязательно внизу были ссылки на них. Я не могу сообразить, как это сделать. Я еще просто совсем чайник. Я думаю, что с вашим вниманием, вы меня не оставите без ответа. Заранее спасибо. NMitra Я подумаю как лучше это организовать. Довольно объемный вопрос. совесть Здравствуйте Наташа. Я наверное вас уже замучил своими проблемами. В общем сделал картинку со слоями и все в нее втиснул. http://myrussiammm.blogspot.com/ Вот что у меня получилось. Наташа помогите пожалуста, над шапкой блога осталось место и с лева тоже. Подскажите как сдвинуть картинку, чтобы она полностью закрывала эти пространства. NMitra Привет! Вы так много уже чего по-изменяли))). Чтобы уменьшить над шапкой пространство посмотрите комментарии к этой статье — http://shpargalkablog.ru/2011/01/prostranstvo-u-zagolovka.html. А чтобы сместить влево замените #header на .header-outer
У меня разрешение монитора чуть выше вашего, и поэтому выглядить будет всё равно не очень. Я бы на вашем месте сделала так:
Картинка будет повторяться по-горизонтали. Но нужно предварительно в Фотошопе убрать полосу справа. PANIC По-моему, в «Сделать шапку в ширину сайта.» Вы объясняете как изменить высоту шапки, а не ее ширину. А как изменить именно ширину? например, чтобы шапка была во всю ширину страницы, а сама ширина блога (тело с сообщениями, боковая панель и др.) осталась прежней. NMitra Привет! Рада слышать)
Твой блог уж больно долго грузиться — 3,7 секунд.
В шаблоне «Путешествие» нужно также изменить
html body .region-inner min-width: 0; max-width: 100%; width: auto; >
html body .content-outer min-width: 0; max-width: 100%; width: 100%; >
body font: $(body.font); color: $(body.text.color); background: $(body.background); $(body.background.override) >
html body .content-outer min-width: 0; max-width: 100%; width: 100%; >
.content-inner padding: 0; > PANIC да, немало времени. там столько всего наворочено. вот уже давно хочу сменить оформление.
пока решила остановить на шаблоне «путешествие». и если там изменить, как Вы предложили, то ширина растягивается не только шапки, а всего того фона, что под шапкой и телом сообщений (не основного фона и не фона под самими сообщениями). а мне надо, только шапку растянуть. NMitra Этот шаблон не очень подходит. Измени только:
-50em — это довольно завышенные величины. Укажи другие. temasey можно ли изменить размер картинки? чтобы она не зависела от ширины сайта? NMitra Заголовка или фон всего сайта? Для какого из блогов? NMitra Увидела. Как же вы подгоняли размер?
Попробуйте для фонового рисунка задать background-size: 1 550px 2000px;. temasey нет. ну у меня картинка вместо заголовка, его и нужно увеличить, фон беспонтово трогать. belo-mor.ru NMitra А я Андроида смотрела.
http://www.belo-mor.ru/. Что-то у меня фоновая картинка, на ней фон заголовка, а над ним буквы блога. Жуть.
С фона сайта убирай узор. Его добавь в изображение заголовка. С помощью margin подвинь влево (он может принимать отрицательные значения). temasey где этот margin находится то? или как им воспользоваться? NMitra Добавить
Подробнее http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html temasey не понимаю. вставляю ниче не происходит temasey http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html там в конечном коде есть хотя бы ссыль на картинку. а я даже ее найти не могу temasey ну где же ты 🙁 temasey так..разобрался) это я понял. но цель то заключалась в том чтобы растянуть эту картинку не затрагивая область сообщений temasey не знаешь дак ответила бы хоть NMitra Извини, не получается круглосуточно сидеть за монитором.
Посмотрела. Комментарий 23 не подходит. Сделай так:
#Header1 damir-tote этот код нужно добавить рядом с другими кодами? damir-tote Все я понял) СПАСИБО))) NMitra Отлично!) damir-tote Глянь пожалуйста, я хотел изначально заменить букву d на эту картинку, но вроде это не получиться. А как установить изображение перед загаловком? чтобы загаловок сдвинулся вправо damir-tote NMitra ты согласна со мной обменяться постовыми. NMitra Откройте профиль, переходить будет удобней.
Я, как правило, сейчас не осуществляю обмен ссылками и их продажу. Я думаю вы уже это успели заметить по страницам блога. damir-tote Я так много раз проверял, и с минусом ставил, ни чего не помогло, решил чуть по другому сделать. а может потом вообше просто картинку оставлю сооруженную в фотошопе.
Жаль. что не хочешь обменяться. Я ТОДу предложил, но пока еще мне не ответил.
Кстати зря ты девушку убрала с шапки — это твоя фишка была. А теперь чертенок в футере. NMitra Мне порой проще самой сделать. Можешь, если хочешь, сбросить на почту шаблон.
Не люблю однообразия, тоскливо становится. Чёртик чем-то приглянулся. Анонимный Здравствуйте, будьте добры, подскажите как сделать заголовки объемными ? Bloglovin требует чтобы они были кликабельны пардон NMitra Здравствуйте.
Вместо троеточия добавьте стили отсюда http://shpargalkablog.ru/2011/02/css-ten-teksta.html#text-shadow
Я верно поняла вопрос? Marina Varzhainova Огромное спасибо за эту статью! Пошла рисовать себе картинку 🙂 Юлик Здравствуйте. Читаю Ваши статьи, многое пытаюсь использовать, но вот с картинкой в шапке получается слабовато. Т.е. она есть, но всегда по умолчанию прижимается к левому углу и при расширении границ блога выглядит не очень красиво. Приходится удерживать ширину блога в соответствии с рисунком. Вот адрес блога: http://iherborganic.blogspot.com NMitra Вы когда добавляли картинку, галочку установили «Вместо заголовка и описания»?
замените ( http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html ) на (параметры определены с учётом вашего изображения)
Юлик NMitra, спасибо огромнейшее. Галочка была проставлена сразу. Вставила указанный Вами код и картинка выровнялась! Еще тысячу мерси. Наталка Михайлівна Зуб Добрый вечер! Подскажите пожалуйста как сделать чтобы картинка была справа от заголовка блога. Хотелось бы ее поставить именно где свободное место..Заранее спасибо. NMitra См. статью. Попробуйте вначале реализовать.
Большая просьба, перед тем, как писать о проблеме, уберите, пожалуйста, вредоносный код. Его не пропустят ни Яндекс, ни Гугл. В итоге у вас не будет позиций в поисковых системах, а значит и посетителей.
См. http://safesearch.ya.ru/ Наталка Михайлівна Зуб Я конечно очень извиняюсь, но я ничего не поняла(просто я во всем этом очень далека).Что за вредоносный код, где он у меня, откуда взялся. И что мне делать на http://safesearch.ya.ru/. Я зарегистрировалась, а что дальше делать. Там так много всего и что мне с этим делать. Я очень извиняюсь, ну не знаю я. NMitra Основная мысль: добавляя внешние скрипты, в том числе выплывающую рекламу, разные «ваш браузер устарел» и т.п. вы заражаете страницы блога, начинает срабатывать антивирус. Ко мне обращался человек, у которого в результате такого баннера «поплыла» вся вёрстка. Нет, я не говорю, что вся реклама — зло, но выбирайте более надёжных партнёров.
Яндекс сообщает о всём, что находит, где может крыться угроза. Поскольку всё перечислять не имеет смысла, я дала ссылку на первоисточник. Olesota Здравствуйте, для скриптов со сменой изображений куда грузить все эти изо1, изо2. ) Валерий Медведев виват виват виват профессионалам. круто впечатляет сильно. вопрос такой: поставил фоновую картинку в body и прозрачный фон на сообщения. теперь хочу увеличить прозрачность и не могу найти в коде где это прописано. http://www.spainyribalka.blogspot.com.es/ NMitra Несколько URL //www.blogblog.com/1kt/transparent/white80.png заменить на свой. Картинку можно сделать в Фотошопе. Olesota точно! спасибо! NMitra Olesota, перед Валерий Медведев может быть у меня тоже присутствует вредоносный код? вы уж хотя бы оповестите меня об этом. жду в недоумении и с нетерпением. NMitra Панели вебмастера Яндекс и Гугл. У меня на компьютере avast, может быть Касперский. Если ничего из вышеперечисленного «не ругается», то будьте спокойны. Mishechka Здравствуйте! Я готовлю себе новый шаблон и за основу взял «Венецианское окно», но выяснилось, что у названия блога в шапке нет ссылки на главную страницу. Как это сделать? В моём старом шаблоне она уже была. NMitra Переходите на страницу с Сообщением, щелкаете на название блога, ссылка есть. Если она отсутствует, «Шаблон»-«Изменить HTML»-«Восстановить шаблоны виджетов по умолчанию». Mishechka Действительно, на странице Сообщения ссылка работает. Но мне кажется это не совсем удобно когда посетитель не находится на странице Сообщения, а просто просматривает анонсы переходя по страницам (кнопки «Вперёд» «Назад»). Тогда, если он находится вверху страницы, ему нужно спуститься вниз и нажать «Главная страница». В старом шаблоне ссылка на названии блога почему-то всегда была активной. NMitra И по кнопкам «Предыдущие»/»Следующие» ссылка на Главную активна Mishechka Я проверил, при уходе с Главной ссылка становится активной. Действительно, какой смысл переходить с Главной на Главную? Простите, Наталья я не подумал. Спасибо. Посмотрите пожалуйста ещё на это: http://i46.fastpic.ru/big/2013/0430/db/0c063b04faef83570ba5dd6d2ae672db.png NMitra Это нормально, так и должно быть. Mishechka Спасибо. MURzilKA Moya Добрый день. Не подскажите ли. Я в простом шаблоне вставляю в заголовок (вместо него) картинку gif. Как сделать. чтобы фон под ней был прозрачным? NMitra Сразу давайте адрес страницы, для чего используйте вариант: ИМЯ/URL при написании комментария. Теория http://shpargalkablog.ru/2013/02/opacity-css.html Sonya Baku Извините, у меня вопрос. Как я могу вставить изображения вместо этого слова «изо» (это там где по часам меняется) NMitra изо — это адрес изображения, его URL, например, http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_hPXTmI/AAAAAAAABQE/ycRtyie_-gI/s1600/corenavigation_sls-class_c197_230x200_11-2009.jpg
То есть там добавляете несколько разных URL картинок Юлия Музычная Зд,Наташа! Проверяю оптимизацию с помощью сервиза PageSpeed Insights:-,, удалите из верхней части страницы JavaScript и CSS, блокирующий изображение. Количество блокирующих ресурсов CSS на странице: 2. Они замедляют отображение контента. -Подскажите в каком месте находится этот, зверь, JavaScript я удалила(очень быстро происходит загрузка, а вот CSS в верхней части не найду : мой сайт :http://myguitara08.blogspot.com Спасибо! С уважением,Юлия. NMitra В Blogger с этим ничего не поделаешь. Nonna Наталья, надеюсь, что не замучила Вас своими вопросами..Спасибо Вам огромное за Ваш труд, внимание и желание помочь. Строки из комментариев: «А как можно вставить картинку — логотип с прозрачным фоном в левый верхний угол блога? Не в заголовок, а еще левее?» Ваш ответ: «Добавьте новый блок: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html и в созданном гаджете укажите необходимый URL
Только в свойства добавьте #Image999 » А мне нужно в правый угол,но.. 1.гаджет я добавила только изменением цифры 1 на 2. ,не добавляя 2.при заполнении гаджета картинка не на прозрачном изначальном фоне, а с тонюсенькой квадратной окантовкой(вставляла с жесткого диска и привязывала на картинку ссылку на другую страницу). 3.можно ли в position перед ]]> установить самые крайние значения верх и вправо? 4. и как можно не добавлять название гаджета?(без него не сохраняется, а оно мне не нужно) 5. у меня для заголовка стоит :помещать описание под изображением, но картинка прижата влево и справа пустота. Поэтому хотелось бы, не выходя на фон, на одном(или выше, что не так заметно) уровне с заголовком добавить Logo(о котором говорилось выше), и прижать его вправо Nonna не добавляя b widget id HTML999′ locked= false type=’HTML Загад Загадыч Привет! Ломаю голову со стилями этими) Разрешите спросить. Как центрировать заголовок блога, если он исполнен в виде jpg-рисунка. Просто с текстом все понятно, а с рисунком не совсем, жду с нетерпением ответ)) NMitra Привет, вариантов много, например, так
