Как добавить картинку в css

Как работать с фоновыми рисунками в CSS

Ни для кого не секрет, что картинки – это неотъемлемая часть любого сайта, будь то небольшой одностраничник или крупный интернет-портал. Они встраиваются с помощью CSS-стилей, а также напрямую через HTML.

В этой статье мы детально разберем работу с фоновыми рисунками на сайте средствами CSS, а также немного затронем HTML.

Работа с фоном в CSS

Для добавления фонового изображения на сайт, в CSS используется свойство background. С его помощью можно не просто загрузить картинку, но и задать ей положение, повторяемость, фиксацию и много всего другого.

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

background-color

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

Применить свойство мы можем, например, к тегу . В данном случае изменится фон всей страницы. Сделать мы это можем сразу внутри HTML-кода с добавлением тега либо напрямую в CSS. Я пойду вторым путем, предварительно подключив CSS в HTML с помощью строчки , где href – адрес местоположения CSS. В моем случае он находится в той же папке, что и HTML, поэтому я сразу указываю название файла.

Итак, подключив CSS, прописываем в него код:

body

Для наглядности я также в HTML добавил небольшой текст. Код выглядит следующим образом:

        
Hello!
  

Таким образом получаем следующую страницу:

В последующем я не буду показывать HTML-код, сконцентрируемся только на CSS.

background-image

С помощью этого свойства можно загрузить фоновое изображение. Мы можем его применить как ко всей странице, так и к отдельному блоку. Если вы хотите, чтобы картинка не занимала всю область страницы, то добавьте в HTML строчку , где class – любое название. Класс нам потребуется для того, чтобы мы могли к нему обратиться через стили.

Вот как я обращаюсь к этому классу в CSS:

Я добавил дополнительные строчки, чтобы изображение в итоговом варианте выглядело полноценным. Сейчас все кратко поясню, чуть позже мы еще вернемся к этому.

1. В первой строчке я указываю ключевое свойство, с помощью которого добавляю фоновое изображение к классу «img» – небольшому блоку на сайте. В скобках указываю его адрес. Так как картинка находится в той же директории, прописывается только ее название.
2. Во второй строчке я делаю так, чтобы изображение не повторялось.
3. В третьей делаю так, чтобы картинка была по центру.
4. Четвертая строчка масштабирует изображение как можно больше с сохранением пропорций изображения.
5. Строки 5 и 6 нужны для того, чтобы задать высоту и ширину блока. Без этого мы попросту не увидим добавляемую картинку.

В итоге получаю следующее:

background-repeat

Если добавить такое свойство, то изображение будет повторяться.

Оно может иметь несколько значений:

• background-repeat: repeat-x – повторение по горизонтали;
• background-repeat: repeat-y – повторение по вертикали;
• background-repeat: repeat – повторение и по горизонтали, и по вертикали;
• background-repeat: no-repeat – изображение не повторяется.

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

body

Обратите внимание, что я также добавил свойство «background-size» – с его помощью я сделал размер фотографии на 80% меньше, чтобы изображение не расползалось на весь экран.

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

• background-attachment: scroll – фон прокручивается вместе со страницей;
• background-attachment: fixed – фон остается неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left.

• background-position: 50% 15%; – изображение располагается по центру по горизонтали и на 15% отступает сверху;
• background-position: 25px 17px; – отступ изображения вниз на 25 пикселей от верхнего края и на 17 пикселей вправо от левого.

linear-gradient

Если вы хотите загрузить градиент (плавный переход от одного цвета к другому) на свою страницу, то для этого необязательно использовать готовое изображение. Такой эффект мы можем создать с помощью свойства linear-gradient.

Вот как это выглядит на примере:

В первой строке указывается откуда будет начинаться градиент. В данном случае – снизу-вверх. Также можно прописать значения to top, to bottom и to left.

На странице это выглядит так:

background-size

В изменении размера картинки поможет свойство background-size.

В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и другие.

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку с размером 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 400×400 px. Вот так будут выглядеть параметры background-size:

background-size: 400px 400px;

Можно также указать только одно значение, и это будет считаться шириной. Тогда высота будет как auto и сохранятся пропорции картинки:

background-size: 400px;

Также мы можем указать значение contain – в таком случае фоновое изображение масштабируется таким образом, что оно полностью заполняет блок или всю страницу.

background-size: contain;

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Альтернативный текст

Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик или другую иконку – это зависит от браузера. Чтобы такого не было, мы можем дать подсказку, описать то, что изображено на картинке. Для этого используется параметр alt, который прописывается к тегу в HTML-файле. Мы еще не говорили об этом, но здесь нет ничего сложного. Картинка загружается аналогично тому, что мы делали при использовании свойства «background-image».

Таким образом, если мы хотим добавить картинку к body, необходимо прописать следующие строчки кода:

Также стоит сказать, что параметр alt позволяет поисковым системам отображать вашу фотографию. Если пользователь будет гуглить «Утренний завтрак», то в фотографиях поисковика будет ваша картинка.

Изображение в качестве ссылки

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

Для этого в коде необходимо добавить тег , где href – ссылка на страницу. Внутри этого тега необходимо добавить картинку.

В результате должно получиться следующее:

Создание полупрозрачного фона в CSS

На сайтах полупрозрачность достигается за счет свойства opacity или задаваемого для фона формата цвета RGBA. Использование такого параметра поможет вам сделать текст более читабельным на фоновом изображении.

Например, чтобы сделать изображение на 50% тусклее, в CSS необходимо прописать следующее:

opacity: 0.5;

Значение opacity прописывается к классу так же, как мы это делали с другими свойствами.

Вместо заключения

Использование фонового изображение на сайте помогает разбавить текстовый контент, а также показать пользователю на живых примерах то, с чем он имеет дело. В этой статье мы рассмотрели основные способы добавления картинок на примере HTML и CSS. Достаточно воспользоваться одним свойством background-image либо тегом , и изображение отобразится на странице.

Codepen — Как добавить картинку в код html

пишу в этом сервисе код с картинкой — и не отображается она как «результат.» Есть ли какие-то особенности для добавления картинок в codepen?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как в письме с Html добавить картинку ?
LN 7.0.3. Отправляю письмо с HTML нижеприведенным способом, а хочется еще вставить картинки чтобы.

Как добавить картинку в webBrowser из ресурсов используя HTML?
Как добавить картинку в элемент управления webBrowser из ресурсов с помощью HTML? Как правильно.

Как добавить картинку из библиотеки медиафайлов django на страницу html?
Допустим есть такая модель: class Product(models.Model): product_image =.

6188 / 3424 / 1028
Регистрация: 07.09.2019
Сообщений: 5,484
bamsik-bamsik, а где размещается сама картинка, что прописываете в src ?
Регистрация: 07.05.2020
Сообщений: 364
Как обычно путь к картинке

img src="/wp-content/uploads/2020/11/ag11-1.jpg">

6188 / 3424 / 1028
Регистрация: 07.09.2019
Сообщений: 5,484

Это относительный путь, пропишите абсолютный. Codepen.io ведь не знает адреса вашего сайта на WordPress.

Регистрация: 07.05.2020
Сообщений: 364
У меня в окне показан абсолютный. Но здесь мне уже сделали замечание за указание адреса моего сайта.
277 / 191 / 88
Регистрация: 04.07.2012
Сообщений: 800

Сообщение от bamsik-bamsik

замечание за указание адреса моего сайта

Так вы пишите что-то типа https://мой.сайт/index.php и никто замечаний не сделает. Иначе, кто Вас знает, написали Вы или нет абсолютный путь.
А вообще учитесь пользоваться средствами браузера (Ф12). Кликаете правой кнопкой на нужном Вам элементе и выбираете «исследовать элемент»/»посмотреть код» (от браузера зависит).
В вашем случае вам покажет строку кода с картинкой. А при наведении мышки на ссылку на эту картинку отобразит саму картинку. Если у Вас картинка не отображается, значит она не доступна по указанному адресу.
Вот пример рабочей картинки.

img src="https://www.cyberforum.ru/customavatars/avatar1501512_1.gif">

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как картинку перевести в html код?
Как картинку перевести в html код?

Как передать картинку в код HTML?
Всем привет! Есть такая проблема. В windows Form создаю pictureBox мне нужно чтобы я мог из.

Как на макете печатной формы добавить картинку после чего добавить реквизиты на эту картинку
Объясните пожалуйста как на макете печатной формы добавить картинку после чего добавить реквизиты.

Как добавить картинку и ссылку в файл xml! Какой код написать?
Какой код и вообще способ используется для вставки картинки в код файла xml? Также какой.

Как добавить код в конце html через id с js?
как добавить код в конец html через id с помощью js

Не работает код с codepen
Дорого времени суток! Не могу заставить работать этот плюсик на своём сайте. Хотя вроде jQuery.

Как правильно изменять размер изображений с помощью CSS/HTML?

Имеются изображения разных размеров(ширина, высота), которые выводятся с помощью . Данное изображение мне нужно уменьшить до 64px(width,height). Указываю как работает. Но изображения разных размеров уменьшаются как попало. То сжатые, то приплюснутые. Как сделать так, чтобы сохранились пропорции изображения при 64px height и width?
Присутствует Bootstrap 3

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

Комментировать
Решения вопроса 1

Тимофей Белоусов @black_wolf1894
Junior Front End Developer
Ответ написан более трёх лет назад
Нравится 6 2 комментария

Если указаны width и height в html — то не работает

Тимофей Белоусов @black_wolf1894
Антон Якунов: ну ясное дело, приоритеты никто не отменял, пихни импорт и будет чудо.
Ответы на вопрос 4

Александр Маджугин @Suntechnic

Правильно — не изменять. За исключением редких специальных случаев, изображение должно отдаваться сервером в нужном размере.

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

если только img тогда надо определится что важнее высота или ширина картинок
в стилях им
display: inline-block \ block;
width: 64px(auto);
height: auto(64px);
в первом случае приоритет ширины, во втором высоты будет.
я, как правило, использую в таких случаях блок с заданными размерами style=»background: url(img.jpg) center center;»
можно еще поиграться с background-size
а вообще Suntechnic прав, пережимайте фотки под нужные контейнеры на стороне сервера и в кеш их
в бутстрапе 3 есть класс img-respontive кстати.

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

HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.

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

Как изменить картинку при наведении на нее курсора или немного о hover-эффектах

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class=»animate1″ , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками < и >. Если все сделали правильно, то должно получиться примерно так:

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

img.animate1 filter: alpha (Opacity=25);
opacity: 0.25;
>
img.animate1:hover filter: alpha (Opacity=100);
opacity: 1;
>

Результат будет такой:

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

img.animate1 filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
>
img.animate1:hover filter: alpha (Opacity=100);
opacity: 1;
>

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1 — moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover — moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
>

И результат будет таким:

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1 — moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover — moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
>

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

Допустим у нас есть две картинки, одна черно-белая другая цветная:

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1 :

И добавляем следующие описания стилей:

div.rotate1 background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
>
div.rotate1:hover background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
>

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

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

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент < a>. Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 background: url (img/button.png); /* Путь к файлу с исходным рисунком */
display: block; /* Ссылка как блочный элемент */
width: 50px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
>
a.rotate2:hover background-position: 0 -30px; /* Смещение фона */
>

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:

И добавим css-стилей:

.animate2 position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
>
.animate2 img position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
>

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition :

.animate2:hover img.second, .animate2 img.second:hover opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
>

А если добавить свойство transform :

.animate2:hover img.second, .animate2 img.second:hover opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
>

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