Как картинку сделать фоном в css

Как сделать на css прозрачный фон, как у картинки?

Посмотрите на вложенную картинку. Сверстал тексты, форму, но как в css сделать прозрачный фон?

• Вопрос задан более трёх лет назад
• 5446 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 4

Миром правят маленькие с#@&ки

Конечно же, rgba().
Ещё можно почитать про background-blend-mode, однако поддержка этого чуда пока невсеобъемлюща.

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать

Прозрачное:
background-color: transparent;
Полупрозрачное с цветом:
background-color: rgba(90,0,0,0);

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Если макет в фотошопе, то выделите фон, посмотрите там цвет, а также прозрачность, которая установлена. Цвет легко определить с помощью отключения прозрачности и пипетки
Далее напишите в css у нужного дива background-color: rgba(цвет из фотошопа, прозрачность из фотошопа)
Например, background-color: rgba(255,255,255, 0.6);

Как сделать, чтобы фон не повторялся?

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству background-repeat добавляется значение no-repeat , как показано в примере 1.

Пример 1. Фон веб-страницы

Здесь фоновая картинка выводится для всей веб-страницы, поэтому стилевые свойства добавляются к селектору body . Результат данного примера показан на рис. 1.

Рис. 1. Фоновая картинка на веб-странице без повторения

См. также

• background-image
• background-repeat
• Атрибут background
• Градиенты в CSS
• Фон в CSS
• Фоновая картинка

Кликабельный логотип или ссылка поверх изображения

Сегодня расскажу немного о верстке, HTML и CSS. Товарищи, верстальщики просьба не судить строго, поскольку я сам таковым не являюсь, а лишь немного знакомлюсь с теми или иными нюансами этого нелегкого дела по мере необходимости.

Задача следующая. В шапке сайта имеется цельное изображение, на котором располагается логотип сайта. Требуется сделать его кликабельным, чтобы при клике мы переходили на главную страницу. Хочу заметить, что следующие действия пригодятся, если вы не верстали шаблон с нуля, а просто хотите внести некоторые правки уже в чью-либо верстку — тему для wordpress, например.

Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:

Далее требуется добавить в HTML код новый слой. Находим в шаблоне место, где выводится изображение в шапке и размещаем там еще один элемент DIV. Получим что-то вроде следующей конструкции:

В файле стилей CSS пишем:

.logo1 { position: absolute; margin: 65px 0 0 282px; z-index: 100; }

Свойство z-index задает порядок перекрытия слоями друг друга при наложении. Блок DIV с более высоким индексом будет располагаться выше чем тот, у кого значение ниже. Оно также используется для создания кликабельной подложка для фона.

Часто в шаблонах wordpress или любых других определяются отступы или рамки для всех изображений на сайте, поэтому может понадобиться обнуление этих значений:

.logo1 img { border: none; margin: 0px; } .logo1 a img { border: none; margin: 0px; }

Если есть какие-то замечания или советы — с радостью выслушаю в комментариях.

17.10.2008 15.11.2017
Оцените статью:
(16 оценок, среднее: 6,13 из 7)
Категории: Верстка
Похожие статьи

49 комментариев к статье “Кликабельный логотип или ссылка поверх изображения”

А мне вот всегда было интересно, можно ли сделать ссылку на логотип, который отображается как фон и прописывается в CSS.

Попробую разобраться с этим следующий раз.

Гораздо логичней сделать картинку именно фоном, кликабельным (к тому же, судя по закрывающеюмуся , это XHTML, в котором нельзя использовать атрибуты width и height, а также нет title у ссылки и alt у картинки). Для этого нам потребуется только текст, заключенный в ссылку — Text (и находящийся в диве и одно свойство CSS: #header a background:url(‘images/logo1.jpg’); Дальше — нужный паддинг (отступ внутри рамки) в px. padding: сверху справа снизу слева;
> Проблема остается в тексте, который останется в центре картинки. Чтобы его сместить чисто по-горизонтали, можно воспользоваться text-indent прямо в нашем #header a. Если же по-вертикали, то текст внутри ссылки нужно засунуть в спан — Text. А уже в CSS писать дополнительные паддинги в самом спане, ну или абсолютное позиционирование (только в этом случае, у header должно быть position:relative, чтобы считалось относительно блока, а не всей области экрана). Это если кратко 😉

конечно лучше #header a <
background:url(’images/logo1.jpg’) no-repeat; да 🙂

Спасибо за такую подробную консультацию:) По поводу картинки фоном — не особо люблю, т.к. во-первых, она загружается после всего сайта как и стили (хотя это вообще не критично), а во-вторых, в некоторых CMS нет возможности редактирования файла стилей через админку. При этом возможность изменения логотипа сделать желательно + опять же при мультиязычности могут возникнуть сложности. Это все не большая проблема, конечно, просто я привык так работать.

Кстати, неправда. Даже ослик 7-ой и 6-ой грузят все отдельные файлы более-менее параллельно (вон на webo.in можно посмотреть диаграмкой). Т.е. грузится HTML и CSS, картинки из CSS, картинки имг. Стили вообще должны грузиться как можно быстрее, т.к. браузер именно по ним строит верстку, поэтому они даже в опере достаточно быстро грузятся. Вот у меня ЦСС так и не удалось ужать меньше 4 кБ, гзип я пока не применяю, поэтому рефлаш все-таки есть через секунду после начала загрузки страницы на плохой скорости. Плюс не стоит забывать об оптимизации — если все в ЦСС картинки по возможности поместить в один CSS Sprite (как у меня — при том, что десяток различных элементов используется, спрайты позволяет уменьшить количество HTTP-запросов по картинкам до 2-х), а также сохранять в гиф-пнг с ограниченной палитрой (в фотошопе выбрать save to web as и поиграть с цветами и их количеством), то все будет грузиться аццки быстро и гораздо клевее. Особых проблем все изменения не вызывают, на самом деле. Да и этот способ более валиден, семантичен, да и более короток, чтобы придумать механизм модификаций.

Уясню для себя ход ваших мыслей:
а) У вас есть фон
б) вы хотите чтоб часть фона была ссылкой
в) вы делаете новый слой с картинкой части фона и накладываете его точно поверх.
Вы в принципе всё делаете правильно но могу упростить задачу. Делаете прозрачный gif, размером той части фона которая должна быть ссылкой, вместо того чтобы «Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:».
Что мы в итоге имеем:
а) меньше гемора с точностью позиционирования.
б) облегчаем суммарный вес картинок на сайте.

angelZ, прозрачный гиф — отличный вариант, к сожалению не нашел реализацию данного метода, поэтому применил свой. Чувствую вариантов решения данной задачи достаточно много. Интересно какой из них оптимальный, потому как в верстках я встречал абсолютно разные.

Я пользуюсь таким же вариантом как и angelZ. Если хотите могу дать ссылку на статью, где я это расписывал!

WebMast, можешь оставить ссылку в комментариях дабы не только я мог воспользоваться этим методом.

А ещё, это можно сделать средствами HTML:
Пусть мы имеем картинку 100*100 и нам надо сделать ссылкой прямоугольник м-у точками: 40;40 и 90;60
Тогда пишем: …
… Способ старый, но зато CSS не трогаешь, а эффект как от варианта с прозрачным гифом.

VaNToS, HTML в комментариях не хочет отображаться, напиши, пожалуйста, на мыло — stod84@gmail.com, я подправлю запись.

Мои решения вопроса: 0) Начнём со способа рассмотренного в заметке. Плюсы: он есть, о работает и это первое, что приходит в голову.
Минусы: нужно жестко следить, чтобы логотип находился точно на своём месте, так как (при использовании сложного фона) пиксель влево, пиксель вправо равносильны расстрелу. При резиновой верстке это еще сложнее. + это дополнительные несколько килобайт на закачку пользователю. 1) Проще всего действительно прозрачный gif (1х1 пиксель) — при этом всё делается так же, как описано в заметке, но не нужно ничего в фотошопе вырезать. Важно! задать размеры, чтоб gif потянулся на весь логотип. Плюсы: просто и быстро; для пользователя всё замечательно.
Минусы: По логике вещей, логотип можно считать смысловым элементом страницы. При попытке, например, его «сохранить как» или распечатать страницу (если нет отдельного стиля для печати) логотипа не будет — как бы подстава получается. 2) Если вся картинка хедера сверстана не фоном, а одним , ему можно назначить map — подробнее в любом учебнике по html. Но способ морально устаревший, так как сейчас для этого используются бекграунды, а к ним такая технология неприменима. 3) Еще одна модификация способа из заметки: картика логотип аккуратно вырезается и сохраняется в png. Плюсы: не нарушается логика (скорее семантика) страницы; если картинка немного съезжает в сторону — это незаметно. Все красиво.
Минусы: получаем проблему с форматом png в IE и еще несколько килобайт для пользователя (хотя некоторые утверждают, что png жмет даже лучше чем gpeg, но не знаю — точно не в фотошопе). Вердикт — если семантика страницы не важна — используем прозрачный gif поверх, иначе играемся с png. PS столько получилось, что стоит даже статью в своем блоге запостить 🙂

Kitich, я как увидел — был приятно шокирован! Спасибо за разъяснения. Действительно для отдельного поста материал:)
Я сам вообще не верстаю, но сталкиваюсь с шаблонами при разработке сайтов, поэтому привел вариант, который вижу наиболее часто. Бывало и с прозрачными gif, но это чаще используется для небольших иконок — карта сайта, домашняя страница, а вот лого постоянно оформлено в DIV, который поверх фона. В этом случае хорошо, что можно картинку сохранить.

Немного дополню, раз такое обсуждение. PNG действительно жмет лучше GIF для малоцветных изображений. Для этого в Photoshop’е надо сохранять Save as for Web и выбирать количество цветов в палитре, правильно подбирая также и способ рассеивания. Лучше jpeg точно — т.к. не проявляются артефакты при сжатии. С PNG-8 нет проблем ни в одном из новых браузеров, в т.ч. и в ИЕ6, выигрыш по сравнению со сжатым GIF — 5-10%, по сравнению с JPEG — больше. Если же нужна полупрозрачность (для лого обычно не надо), то действительно, будут проблемы с PNG-24. Сохранение логотипа также вещь ненужная обычно, поэтому фон предпочтительнее все же. Кроме семантики, играет роль также и оптимизация — обычно блокируется параллельная загрузка более, чем 3х файлов, и CSS начинает грузиться почти сразу с HTML. И изображения в фоне грузятся быстрее — именно это нам и надо, чтобы отнести все картинки не оформления в «пост-загрузку» (условно говоря). По map’ам тоже добавлю — не всегда можно сверстать все фоном. Вообще, мапы сейчас надо использовать только в одном случае — если мы хотим сократить колво изображений на странице, подключаемых через img. Это вполне нормальный подход. Во всем остальном обзор методов — отличный.

to Сергей М. ну PNG-8, как я понимаю, полупрозрачности не даёт 🙁
И все же где-то сталкивался с таким мнением: Фотошоп не использует всех возможностей PNG-24 — жмет не самым лучшим образом. Рекомендовался какой-то софт даже для работы с PNG, но я тогда не обратил внимание, к сожалению. Про «пост-загрузку» спасибо. Встречался с таким мнением, но только теперь понял, почему так 🙂 to TOD А я просто обычно сам свои макеты собираю, так что приходится :).

Да, PNG-8 не доставляет. Но пихать 24 туда, где он не нужен — тоже не стоит :). По поводу жмет не лучшим образом — возможно, еще 5-10% можно сэкономить, так что если вспомнишь, какой софт — опиши в своем блоге (я подписчик уже, да))) С «пост-загрузкой», конечно, не все так просто. Я вот по материалам sunnybear, документов Yahoo и прочему пытаюсь дописать талмуд по оптимизации блога (в частности, Вордпресса), но вот с этим вопросом пока только вопросов больше, чем ответов.

Как и обещал — http://kitich.in.ua/index.php?page_curr=blog&id=23 — подробнее о PNG 🙂

Господа, прежде чем предлагать ПНГ24 (причём полученный на выходе из шопа) посмотрите статистику использования ослов 5-й и 6-й версий. К сожалению многих верстальщиков, включая меня, их использует большинство. А те танцы с бубном, необходимые для запуска альфа канала ИМХО не стоят тех килобайт и красоты.
Так что посмотрите какая прелесть этот пнг24, смахните скупую слезу и забудьте про него пока мир офисного планктона и тех у кого админы не позволяют ставить никакие другие браузеры кроме предустановочных (я не говорю про браузеры на движке осла) не пересядут как минимум на 7-го осла.)))

2 Kitich
Я думаю автор не будет против небольшого оффтопа. )))
А какое для вас решение нормальное? Ява?
И ещё вопрос, пнг в текстурном бакграунде?

to angelZ:
Не такие уж и с бубном )) Нужно один раз найти нормальное для себя решение и юзать. Но мы уходим в оффтопик. Обещаю прикрутить у себя на блоге комментарии за выходные 🙂

to angelZ:
К сожалению, не помню 🙁 последний раз действительно сталкивался с проблемой давно и это было на http://asu.ntu-kpi.kiev.ua Тогда, помню, выяснилось, что популярные хаки, которыми я пользовался, криво работают (совсем неожиданный поворот) на Опере 🙂 В итоге потратил много времени, но что именно сделал — не помню. Надо будет покопаться и написать отдельно.
Проблема бекграунда, скорее всего, таким образом не решается, но утверждать не буду.

Я вовсе не против дискуссий)) Тем более таких интересных и полезных. Лично мне использование png не мешает, в принципе, там есть какой-то хак через htc файл, который я встречаю в большинстве последний сверстанных проектов.

Верстальщик
Боянчег, но новичкам самое оно )

Как вариант, который я использую (кстати даже не прийдется ничего вырезать с помощью фотошопа, делать gif или png, если что-то, мне лень было читать все коменты, просто пробежлся и вроде подобного никто не предлагал=) ). Вобщем суть такова — на div в background’e которого задана картинка, накладываем другой div с прописаным css-свойством position:absolute; в зависимости от того какую часть картинки, хотите сделать ссылкой подгоняете этот div на нужное место, (для удобства для начала задаем border:1px solid; чтобы было видно куда двигать 🙂 естественно затем убираем или же приравниваем к 0px) задаем высоту и ширину там же в CSS (Например: width: 150px; height: 36px;), затем уже в самом div’e прописываем событие onClick=»document.location=’index.php’» — это для примера index.php можно указать ссылку куда хотите =))). А да, и желательно бы к нашему div-ссылке 🙂 указать z-index какой-нибудь по выше чем 1 =). Данный способ я считаю избавит от ненужных телодвижений в сторону граф.редакторов, да и просто экономит время. Но есть и минусы — нет названия сайта, что не очень хорошо в плане индексации сайта поисковиками))) Но и это можно решить.

обнуление этих значений можно провести через * < margin: 0; border: 0>🙂

Спасибо Вам огромное! Я с помощью Вашей статьи сделала новую шапку на свой сайт «В Полный Рост» — вот, посмотрите: enioway.ru
Теперь сайт загружается гораздо быстрее — еще раз, огромное Вам спасибо!

Давольно-таки интересно, но все это я читал, когда только открыл книжку по css.Статья для ленивых)

Спасибо, статья очень полезная, особенно для новичков. Вопрос: у меня рамка вокруг ссылки и в левом углу значок, типа изображение 🙁 Не подскажете как убрать?

Екатерина, нужно в файле стилей CSS найти тег «а» или класс, который для него определен, и отредактировать их.

так я в классе для хедера и ссылки хедера поставила значение border: none div.art-Header-logo
position: absolute;
margin: 1px 445 93 13px;
z-index: 2;
> div.art-Header-logo img
border: none !important;
margin: 0px;
> div.art-Header-logo a img
border: none !important;
margin: 0px;
> или не здесь? или вообще везде, что касаемо тега «а»?

Речь идет о «моем книжном»? В каком браузере возникают рамка и значок?
Ил на хостинг залита версия без «артефакта»?

Да, о нем, но я пока тренируюсь на локалхосте, поэтому там ничего нет:) работаю в мазиле. Так что делать-то?

Просто сложно вылавливать подобные глюки, не видя всего кода — они могут возникать из-за других стилей или элементов кода, которые не видит никто кроме вас 🙂 Попробуйте добавить border: none !important; не только к изображению, но и к ссылке, и ко всем элементам между ними, если такие есть. Также попробуйте добавить outline: 0; — этот параметр отвечает за «обводку» ссылок при нажатии на них. И самый главный совет: скачайте для своего firefox (вот за что я люблю этот браузер) расширение firebug (https://addons.mozilla.org/en-us/firefox/addon/firebug/). Я сам всегда использую его для вылавливания ошибок верстки. Оно добавит внизу окна кнопочку и позволит проанализировать любые элементы страницы и стили, которые к ним применяются. Просмотрите стили вашей ссылки и внешних/внутренних по отношению к ней элементов — скорее всего, увидите, откуда берется лишняя рамка.

за расширение спасибо огромное))))удобно! но вот с рамкой болт 🙁 не выходит…

Возможно буду писать глупости, но тестируем вслепую -_- так что приходится 1. Предположим, что div.art-Header-logo a < border: none !important; outline: 0; >не помогло. 2. Предположим, что вы просмотрели с помощью расширения стили, примененные к ссылке и всем элементам, которые отображаются на экране в том же месте, и тоже не нашли никаких косяков. Если вы не сделали чего-то из вышеперечисленного, делайте (хотя по пункту 2 сейчас пройдемся подробнее). 3. Переберите элементы, которые выводятся в нужном месте экрана (ссылка, изображение и все сопутствующие элементы) и найдите во вкладке «макет» firebug’а элемент с ненулевым border’ом. Если такой есть, перепроверьте еще раз стили, которые к нему применены. 4. Если такого элемента не нашли, проверьте соседние элементы — может туда попало что-то лишнее. 5. Возможно, дело не в border’е, а есть какой-нибудь внешний элемент с отступом и фоном, который создает эффект рамки. 5. Если ничего умного в голову больше не приходит (а пока не приходит), попробуйте использовать сброс стилей в начале css-файла (что-то типа http://meyerweb.com/eric/tools/css/reset/) — возможно браузер цепляет что-то свое. Пока ничего больше не придумал 🙁

Спасибо большое за помощь:) Я начала все заново и внимательно-внимательно, и все получилось. Видимо по невнимательности и на уставшую голову:) Спасибо еще раз, пошла на паб переносить!

Поздравляю. Заодно чему-то новому научились )

Здравствуйте! Правильно ли я делаю? У меня не получается(((
В index.php у меня так: и т.д. В template.css так (в самом конце дописала):
.logo1 position: absolute;
margin: 1px 0 0 1px;
z-index: 100;
> Ничего не изменяется почему-то(((

Сейчас как раз вожусь с лого. Пост в тему, буду разбираться.

Тоже думаю, как ссылку на изображение поставить, если оно описывается в CSS…попробую с прозрачным гифом сделать )))

Мил человек, большое тебе человеческое спасибо, 4 часа перебирал уроки всяких криворуких и только этот блог смог хоть чем-то помочь, спасибо-спасибо!

А как сделать кликабельной картинку НЕ прямоугольной формы? Например, треугольную?

Вячеслав, если честно, не знаю. Там был какой-то элемент в HTML который позволял делать разной формы ссылки с картинки, но увы не помню как он называется. Надо гуглить, хотя там тоже какие-то сложные все варианты.

Как сделать картинку фоном в css

В этой части учебнике вы узнаете как происходит работа с фоном в CSS, ну и конечно с изображением.

Свойства CSS для фона:

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

• background-color — Определяет цвет фона;
• background-image — Назначает фоновое изображение;
• background-size — Масштабирует картинку;
• background-position — Задаёт начальное значение изображению;
• background-origin — определяет область позиционирования фонового рисунка;
• background-repeat — Повторение картинки;

Если с первым всё понятно, просто меняет цвет, то с остальными посложнее.

HTML — Изображение фон

Фоновое изображение может быть задано практически для любого HTML элемента.

Фоновое изображение на HTML элементе

Чтобы добавить фоновое изображение в HTML элемент, используйте атрибут HTML style и CSS свойство background-image :

Пример

Добавление фонового изображения на HTML элемент:

Вы также можете указать фоновое изображение в элементе в разделе :

Пример

Задания фонового изображения в элементе :

Фоновое изображение на странице

Если вы хотите, чтобы вся страница имела фоновое изображение, вы должны указать фоновое изображение в элементе :

Пример

Добавьте фоновое изображение для всей страницы:

Фоновый повтор

Если фоновое изображение меньше элемента, то изображение будет повторяться по горизонтали и вертикали, пока не достигнет конца элемента:

Пример

Чтобы фоновое изображение не повторялось, установите для свойства background-repeat значение no-repeat .

Пример

Фоновая обложка

Если вы хотите, чтобы фоновое изображение покрывало весь элемент, вы можете установить для свойства background-size значение cover.

Кроме того, чтобы убедиться, что весь элемент покрыт, установите для свойства background-attachment значение fixed:

Таким образом, фоновое изображение будет покрывать весь элемент, не растягиваясь (изображение сохранит свои первоначальные пропорции):

Пример

Фоновая растяжка

Если вы хотите, чтобы фоновое изображение растягивалось, чтобы соответствовать всему элементу, вы можете установить для свойства background-size значение 100% 100% :

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

Пример

Узнайте больше о CSS

Из приведенных выше примеров вы узнали, что фоновые изображения можно стилизовать с помощью свойств фона CSS.

Чтобы узнать больше о свойствах фона CSS, изучите наши CSS Background Учебник.

Фон блока в CSS

У блока может быть различный фон, в том числе, прозрачный. В CSS прозрачный фон установлен по умолчанию. То есть, можно видеть то, что находится за блоком, за исключением мест, занятых контентом. Но есть возможность изменить фон блока. Он может иметь любой цвет. Также фоном может быть картинка. В этой теме мы рассмотрим, как это делается.

Цвет фона блока

Свойство background-color устанавливает цвет фона. Значением этого свойства является цвет, указаннный одним из способов, существующих в CSS. Кроме того, оно принимает такие значения:

background-color: transparent — прозрачный фон (по умолчанию)

background-color: inherit — значение принимается от родительского элемента

Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку, если ранее он уже был изменён.

Создадим блок, зададим ему размеры и установим цвет фона.

Область заполнения фона

Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip . Оно принимает следующие значения:

background-clip: border-box — весь блок вместе с рамкой (по умолчанию)

background-clip: padding-box — весь блок без рамки

background-clip: content-box — фон заполняет только область содержимого

При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.

Добавим на страницу блок, зададим ему рамку и внутренние отступы и установим фон, заполняющий только содержимое блока:

Фон в виде картинки

В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image . Значением этого свойства является путь к файлу картинки. Он указывается так:

background-image: url(«путь к файлу»);

Для примера можно использовать это изображение. Нажмите на него правой кнопкой мыши и сохраните с именем image. Разместите файл в той же папке, где находится страница. Иначе путь к файлу нужно указывать не так, как в примере.

Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:

Не забывайте, что так устанавливается именно фон блока. На нём можно разместить контент.

Размер фоновой картинки

Свойство background-size устанавливает размеры фоновой картинки. Оно определяет не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство background-size влияет на картину, которая становится фоном. Значение свойства можно указать в единицах измерения CSS или процентах. Сначала пишется ширина и через пробел высота. Если не соблюсти пропорции ширины и высоты, то изображение искажается.

Также у свойства background-size есть такие значения:

background-size: auto — если указано только это значение, то изображение имеет свои реальные размеры. Если один из размеров задан в единицах измерения, то второму размеру можно указать auto , чтобы у картинки были правильные пропорции.

background-size: cover — картинка заполняет весь фон, сохраняя пропорции.

background-size: contain — вся картинка отображается в фоне.

Значения cover и contain есть также у свойства object-fit . В теме про него эти значения рассмотрены более подробно.

Укажем размер фоновой картинке:

Позиционирование изображения

В прошлом примере виден левый верхний угол изображения. При этом картинка оказалась обрезанной справа и снизу из-за того, что блок меньше изображения. Существует возможность расположить изображение по-другому, чтобы были видны другие части. Для этого используется позиционирование. Его устанавливает свойство background-position . Значением свойства являются два слова, перечисленных через пробел.

Первое слово — это горизонтальное позиционирование. Значение может быть left , center или right .

Второе слово — это вертикальное позиционирование. Значение может быть top , center или bottom .

Расположим изображение в созданном блоке справа сверху.

Повторение изображения

Добавим на страницу ещё один блок и установим фон в виде того же изображения. Но теперь размеры блока будут намного больше размеров картинки. Пока мы не будем ничего менять, чтобы посмотреть, как выглядит блок. Вы увидите, что изображение повторяется для полного заполнения блока. Добавим блоку рамку, чтобы видеть его размеры.

Чтобы изменить повторение изображения, используется свойство background-repeat . Оно принимает такие значения:

background-repeat: repeat — повторяется по горизонтали и по вертикали (по умолчанию)

background-repeat: repeat-x — повторяется только по горизонтали

background-repeat: repeat-y — повторяется только по вертикали

background-repeat: no-repeat — не повторяется

background-repeat: inherit — значение принимается от родительского элемента

Изменим фон блока так, чтобы изображение не повторялось.

В такой ситуации тоже можно использовать позиционирование изображения. Значением свойства background-position могут быть не только слова, но и два числа в единицах измерения CSS, указанные через пробел. Это отступы изображения от левого верхнего угла блока.

Попробуйте разные способы повторения изображения.

Прокрутка фона

Есть возможность установить, как будет двигаться фон блока при прокрутке страницы, а также при прокрутке самого блока. Это делается с помощью свойства background-attachment . Оно может принимать такие значения:

background-attachment: scroll — фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)

background-attachment: fixed — фон зафиксирован относительно левого верхнего угла окна браузера

background-attachment: local — фон движется вместе с содержимым при прокрутке блока

Для примера добавим на страницу ещё один блок с фоном в виде изображения. Разместим его в самом начале страницы, то есть этот блок должен находиться выше других. Добавим в него вложенный блок с большой высотой, чтобы появилась прокрутка. Сделаем так, чтобы фон прокручивался вместе с содержимым блока.

Попробуйте установить другие варианты прокрутки фона. Посмотрите, как будет двигаться фон блока.

Фон для сайта html (CSS свойство background)

Фон для сайта задаётся свойством background [w3.org].

background-color

background-image

background-repeat

background-position

background-attachment

background-clip

background-origin

background-size

background-blend-mode

Написание

Это равнозначное написание кода:

Через запятую можно указывать значения для нескольких фоновых изображений

44 комментария:

Виталий Зданевич Спасибо большое, Наталья, но я ничего не понимаю…

Какой же мне код написать в блок Блоггера, чтобы Клац — белый фон! Клац снова — обратно черный! NMitra В код

В гаджет HTML/JavaScript

фон тёмный — кнопка белая

фон белый — кнопка тёмная Виталий Зданевич Так этот код меняет только фон вне колбасы основной части блога (как в примере)? А чтобы весь фон менялся, колбаса и основной? NMitra Вот этот участок должен выглядеть как:

.post-outer Виталий Зданевич Столько кода — я совершенно ничего не понимаю… Это разные варианты или исправления.

Что же писать в темплейт и что-же — в гаджет. Мол:

В темплейте между X и Y пишем:

В код нового гаджета пишем:

xxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx NMitra Комментарий 6 — изменения в «Дизайн»-«Изменить HTML».

Комментарий 2 — там же добавляем в body.

Комментарий 3 — вносим код в новый гаджет HTML/JavaScript. Виталий Зданевич Там же это перед ]]> ? Виталий Зданевич съелся тег

] ] > < / b : s k i n >NMitra Там же — это в «Дизайн»-«Изменить HTML». NMitra Для того, чтобы и менялся текст: