" rel="stylesheet" /> 
 #--- > . не знаю 
 
   > 

     " rel="stylesheet" /> #--- > . не знаю 
Управление данными в json files
 
   > 

Отслеживать
ответ дан 16 ноя 2021 в 7:44
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
16 ноя 2021 в 8:30

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как наложить текст на фон?

Как можно сделать, чтобы текст был на фоне? Хотелось бы чтобы заголовок(и другие добавочные текста были на фоне) Вот код html:

#title < text-align: center; font-family: Playbill; font-weight: normal; font-size: 40px; >.bg_image < background: url("image/background-photo.jpg"); overflow: hidden; position: relative; max-width: 100%; height: auto; >

Вот как выглядит на данный момент

Отслеживать
задан 11 ноя 2021 в 17:48
Виктория Мот Виктория Мот
49 4 4 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

например так можно

#title < text-align: center; font-family: Playbill; font-weight: normal; font-size: 40px; background-image: url("http://tvoyposter.ru/userdata/image/thumbs/p/17/b4/17b4fa73d392b4ec697a16c8ebc39416_p.jpg"); background-size: contain; border: 1px solid black; width: 500px; height: 75px; line-height: 75px; color: rgba(255, 255, 255, 0.5); >

Путеводитель по городам

а вы кстати зачем то еще для img продублировали изображение через задний фон

Отслеживать
ответ дан 11 ноя 2021 в 18:10
37.2k 4 4 золотых знака 27 27 серебряных знаков 70 70 бронзовых знаков

А так получается, что мое изображение разчетверилось и занимает лишь 10% экрана, можно ли как нибудь отформатировать под весь размер фотографии?

11 ноя 2021 в 18:55
поиграйтесь с параметром background-size: и параметром background-repeat:
11 ноя 2021 в 18:56

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Фон для сайта CSS/HTML

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

Как сделать фон для сайта CSS

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

Пример

Lorem Ipsum

HTML

 
Lorem Ipsum
 

CSS

 .bg-ex-color < background: #a8d7e1; /* Цвет блока */ width: 100%; /* Ширина блока */ height: 350px; /* Высота блока */ >

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

Для того, чтобы сделать фон картинкой на весь экран, необходимо использовать свойство background-image. Чтобы картинка была на всю ширину фона, нужно в объявлении прописать значение cover. Для примера создадим div, а для фона сайта нужно прописать свойство к тегу body.

Пример

Lorem Ipsum

HTML

 
Lorem Ipsum
 

CSS

 .bg-ex-image < background-image: url(image.jpg); /* Путь к картинке */ background-size: cover; /* Растягиваем картинку по ширине */ background-repeat: no-repeat; /* Картинка фона без повторения */ background-position: center; /* Позиция фона по центру */ >

Как сделать фон размытым CSS

Для того, чтобы сделать фон сайта размытым можно использовать псевдоэлемент ::before для тега body, в этом случае в коде HTML не нужно прописывать дополнительный div, только свойства CSS. Но когда нужно сделать фон для элемента размытым можно использовать дополнительный div. На примере показан размытый фон для элемента div, но так же прописан пример CSS для тега body.

Пример

Lorem Ipsum

HTML

  
Lorem Ipsum 
 

CSS для DIV

 .bg-ex-blur < position: relative; display: flex; justify-content: center; align-items: center; height: 350px; >.img-blur < position: absolute; z-index: 1; width: 100%; height: 350px; background: url(image.jpg); /* Путь к картинке */ background-repeat: no-repeat; background-size: cover; background-position: center; filter: blur(5px); /* Размытие картинки */ >.bg-ex-blur span

Как поставить картинку на задний фон в html css

Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML-документ, как сделать картинку фоном, размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?

Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.

Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG) , GIF и PNG .

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

Чтобы сделать картинку фоном, для тега нужно прописать атрибут «background» :

Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.

и в HTML файл вставьте вот этот код:

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

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

Не правильное название:

○ Как вставить картинку в HTML

Чтобы вставить картинку в HTML-документ, используют тег с параметром «src» , которое определяет путь или адрес к картинке.

Теперь смотрим полный пример. Вставьте файл картинки «kartinka.jpg» рядышком с HTML файлом и в HTML файле пропишите вот этот код:

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

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

Не правильное название:

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

○ Как вставить картинку, если она находится в папке «img» или «images»?

Если картинка находится в папке «img» или «images» , тогда нужно указать путь от HTML файла к папке «img» или «images» , а потом уже только прописать название картинки с расширением. Выглядеть это будет вот так:

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

Задание: Попробуйте создать папку с любым названием (только на латинице), закачать в папку картинку и в HTML файле указать правильный путь к изображению так, чтобы все отобразилось. Пробуйте!

○ Как сделать картинки в HTML по центру.
Чтобы картинка разместилась по центру HTML документа, заключите тег картинки в известный вам тег

○ Как сделать обтекание или выравнивание картинки в HTML

К тегу нужно добавить атрибут «align» .

Значение атрибута «align» :

left – выравнивание по левому краю, текст будет обтекать справа ( align=»left» ).
right – выравнивание по правому краю, текст обтекает слева ( align=»right» ).

○ Как сделать отступы от картинки в HTML

Чтобы сделать отступы от картинки, к тегу нужно добавить атрибут «hspace» и «vspace» . Параметры задаются цифрами и в пикселях

HSPACE — отступы от картинки по горизонтали (в пикселях) ( hspace=»15″ ).
VSPACE — отступы от картинки по вертикали (в пикселях) ( vspace=»15″ ).

○ Как установить размер картинки в HTML

Чтобы задать размер картинке, к тегу нужно добавить атрибут «height» и «width» . Параметры задаются цифрами и в пикселях или в процентах.

HEIGHT — высота изображения ( height=»100″ ).
WIDTH — ширина изображения ( width=»50″ ).

○ Как установить рамку для картинки в HTML

Чтобы задать рамку для картинки, к тегу нужно добавить атрибут «border» . Параметры задаются цифрами и в пикселях.

Если задать к атрибуту «border» параметр « 0 », рамка отображаться не будет.

○ Дополнительные атрибуты для картинок

Title — это заголовок картинки. Заголовок отображается в том случае, если вы наведете на картинку курсор мышки.

Если у пользователя отключен режим загрузки изображений, то вместо картинки ему загрузится иконка с символикой, что картинки нет (на разных браузерах иконка разная). Можно в таком случае написать подсказку для пользователя, подписав картинку. Для этого используется параметр «alt» .
Текст, который прописан в «alt» , будет отображаться вместе с иконкой.
Смотрите пример:

Вот и все! Теперь попробуем все то, что я написал в уроке использовать на веб странице.

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

Похожие публикации:

1. Как выставить блоки в одну строку css
2. Как деформировать div css background
3. Как убрать отступы у блока в css
4. Как убрать рамку в css