Css как поставить картинку на фон: background-image | htmlbook.ru

Leave a Comment / Css / By /

Как сделать фон картинкой

Очень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так это знают), я и решил рассказать в этой статье, как сделать фон картинкой.

Существует 3 основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

Начнём с фона в виде градиента по горизонтали. Первым делом, Вам необходимо вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге, получится, длинная вертикальная полоска толщиной в 1 пиксель. Пусть её высота будет 800 пикселей. Чтобы сделать такой градиентный фон, необходимо в CSS написать следующее:

body {
  background: url("images/bg.jpg") repeat-x #dedede;
}

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

Возможно, Вы сейчас спросите: «А что будет, если высота будет больше 800 пикселей?«. Вот для этого мы и задали «#dedede» — тот цвет, где уже нет указанного фонового изображения. Безусловно, у Вас будет другое значение, которое соответствует самому последнему цвету в градиенте. Таким образом, получится, что вначале идёт градиент, а уже потом однотонный цвет, и никаких рывков не происходит.

Абсолютно аналогичный принцип и с градиентом по вертикали, только нужно уже вырезать картинку высотой в 1 пиксель, а также необходимо центрировать сам фон по центру:

body {
  background: url("images/bg.jpg") repeat-y center #dedede;
}

Иногда, центрирование не требуется.

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

CSS. Поэтому не получится сделать резиновую вёрстку там, где находится картинка в фоне, другими словами, картинка не будет растягиваться. А задаётся она аналогично:

body {
  background: url("images/bg.jpg") no-repeat #dedede;
}

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

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

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

  • Создано 16.12.2011 13:32:22
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Фоновое изображение CSS в элементе :after

спросил

Изменено 5 лет, 6 месяцев назад

Просмотрено 199 тысяч раз

Я пытаюсь создать кнопку CSS и добавить к ней значок с помощью :after, но изображение так и не появляется. Если я заменю свойство «фон» на «фоновый цвет: красный», появится красное поле, поэтому я не уверен, что здесь не так.

HTML:

  Нажмите на меня

CSS:

 .кнопка {
отступ: 15px 50px 15px 15px;
цвет: #fff;
текстовое оформление: нет;
отображение: встроенный блок;
положение: родственник;
}
.кнопка: после {
содержание: "";
ширина: 30 пикселей;
высота: 30 пикселей;
фон: url("http://www. gentleface.com/i/free_toolbar_icons_16x16_black.png") без повтора -30px -50px без прокрутки;
цвет фона: красный;
верх: 10 пикселей;
справа: 5 пикселей;
положение: абсолютное;
отображение: встроенный блок;
}
.зеленый {
цвет фона: #8ce267;
}

Вы можете проверить эту скрипку, чтобы понять, что именно я имею в виду.

Спасибо за любые советы.

  • css
  • фон

Пара вещей

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

(b) no-scroll не работает, я не верю, что это допустимое свойство фонового изображения. попробуйте что-то вроде исправлено:

 .кнопка: после {
    содержание: "";
    ширина: 30 пикселей;
    высота: 30 пикселей;
    background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") без повторения -30px -50px исправлено;
    верх: 10 пикселей;
    справа: 5 пикселей;
    положение: абсолютное;
    отображение: встроенный блок;
}

Я обновил ваш jsFiddle до этого, и он показал изображение.

3

Как сказал AlienWebGuy, вы можете использовать background-image. Я бы посоветовал вам использовать фон, но ему потребуются еще три свойства после URL:

background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 без повторов;

Объяснение: два нуля обозначают позиционирование изображения по осям x и y; если вы хотите настроить отображение фонового изображения, поэкспериментируйте с ними (вы можете использовать как положительные, так и отрицательные значения, например: 1px или -1px).

Нет повтора указывает, что вы не хотите, чтобы изображение повторялось по всему фону. Это также может быть повтор-x и повтор-y.

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Magento2: добавление моего собственного фонового изображения в пользовательскую тему

спросил

Изменено 3 года, 4 месяца назад

Просмотрено 5к раз

Я добавил пользовательскую тему magento и теперь пытаюсь добавить к ней фоновое изображение.

Но консоль разработчика в Chrome и Firefox продолжает говорить:

«Не удалось загрузить изображение».

Я поместил изображение в оба этих каталога:

 /web/css/source/images/brushed_alu.png
/web/images/brushed_alu.png

И тогда мой _extend.less:

 body {
  фон: #fff url(/images/brushed_alu.png) вверху по центру;
}

Я очистил кеш и статические файлы, но это просто вызывает ошибку «Не удалось загрузить изображение» как в Chrome, так и в Firefox.

Есть идеи?

  • тема
  • css
  • меньше

Поместите изображение ниже

magento_root\app\design\frontend\Themes_Package\theme\web\images

Поместите этот код в файл .css 

 body{
    фон: url('../images/brushed_alu.png')верхний центр;
}

Поместите .css файл вашей темы в это место

magento_root\app\design\frontend\Themes_Package\theme\web\css\style.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *