html — Background-image не работает, не подгружает картику
Здраствуйте, не прогружает картинку:(
body { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.6; color: #333; } *, *:before, *:after { box-sizing: border-box; } h2, h3, h4, h5, h5, h6 { margin: 0%; } /*container*/ .container { width: 100%; max-width: 1200px; margin: 0 auto; } /*intro*/ .intro { width: 100%; height: 100vh; background: url("/assets/images/intro.jpg") center no-repeat; -webkit-background-size: cover; background-size: cover; }
<!DOCTYPE html> <html leng="eng"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="assets/css/style.css"> <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700&display=swap" rel="stylesheet"> <title>Mogo</title> </head> <body> <div> <div> <h2>Mogo</h2> </div> </div> </body> </html>
- html
- css
4
У вас папки css и images находятся на одном уровне. Попробуйте указать следующий путь к файлу:
background: url("../images/intro.jpg") center no-repeat;
Т.е.написав ../ вы выходите из текущей папки (в нашем случае из папки css) и заходите в папку images, в которой и обращаетесь к изображению intro.jpg
2
У вас в папке нету картинки значит или вы указали неправильный путь. Добавил первую попавшееся фото в класс intro и все работает.body { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.6; color: #333; } *, *:before, *:after { box-sizing: border-box; } h2, h3, h4, h5, h5, h6 { margin: 0%; } /*container*/ .container { width: 100%; max-width: 1200px; margin: 0 auto; } /*intro*/ .intro { width: 100%; height: 100vh; background: url("https://icdn.lenta.ru/images/2019/07/19/20/20190719202701230/top7_7b989314a6df4679cdf0a6538036e872.jpg") center no-repeat; -webkit-background-size: cover; background-size: cover; }
<!DOCTYPE html> <html leng="eng"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="assets/css/style. css"> <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700&display=swap" rel="stylesheet"> <title>Mogo</title> </head> <body> <div> <div> <h2>Mogo</h2> </div> </div> </body> </html>
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Не работает фоновое изображение, модуль Background Image Field (https://www.
drupal.org/project/bg_img_field)Пробовала ставить несколько модулей и ни один не заработал, к сожалению.
Модуль Background Image Field (https://www.drupal.org/project/bg_img_field), выдает такую ошибку при редактировании поля фонового изображения.
Notice: Undefined index: alt in Drupal\image\Plugin\Field\FieldType\ImageItem->defaultImageForm() (line 439 of core/modules/image/src/Plugin/Field/FieldType/ImageItem.php).
Drupal\image\Plugin\Field\FieldType\ImageItem->defaultImageForm(Array, Array) (Line: 183)
Drupal\image\Plugin\Field\FieldType\ImageItem->storageSettingsForm(Array, Object, ) (Line: 45)
Drupal\bg_img_field\Plugin\Field\FieldType\BgImgItem->storageSettingsForm(Array, Object, ) (Line: 92)
Drupal\field_ui\Form\FieldStorageConfigEditForm->form(Array, Object) (Line: 106)
Drupal\Core\Entity\EntityForm->buildForm(Array, Object) (Line: 56)
Drupal\field_ui\Form\FieldStorageConfigEditForm->buildForm(Array, Object, ‘node.test. field’)
call_user_func_array(Array, Array) (Line: 532)
Drupal\Core\Form\FormBuilder->retrieveForm(‘field_storage_config_edit_form’, Object) (Line: 278)
Drupal\Core\Form\FormBuilder->buildForm(Object, Object) (Line: 73)
Drupal\Core\Controller\FormController->getContentResult(Object, Object) (Line: 39)
Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController->getContentResult(Object, Object)
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 158)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 80)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 705)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
Notice: Undefined index: title in Drupal\image\Plugin\Field\FieldType\ImageItem->defaultImageForm() (line 446 of core/modules/image/src/Plugin/Field/FieldType/ImageItem. php).
Drupal\image\Plugin\Field\FieldType\ImageItem->defaultImageForm(Array, Array) (Line: 183)
Drupal\image\Plugin\Field\FieldType\ImageItem->storageSettingsForm(Array, Object, ) (Line: 45)
Drupal\bg_img_field\Plugin\Field\FieldType\BgImgItem->storageSettingsForm(Array, Object, ) (Line: 92)
Drupal\field_ui\Form\FieldStorageConfigEditForm->form(Array, Object) (Line: 106)
Drupal\Core\Entity\EntityForm->buildForm(Array, Object) (Line: 56)
Drupal\field_ui\Form\FieldStorageConfigEditForm->buildForm(Array, Object, ‘node.test.field’)
call_user_func_array(Array, Array) (Line: 532)
Drupal\Core\Form\FormBuilder->retrieveForm(‘field_storage_config_edit_form’, Object) (Line: 278)
Drupal\Core\Form\FormBuilder->buildForm(Object, Object) (Line: 73)
Drupal\Core\Controller\FormController->getContentResult(Object, Object) (Line: 39)
Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController->getContentResult(Object, Object)
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 158)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 80)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 705)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
IMG -SRC — Google Suce
AllebilderNewsVideOsmapsShoppingBücher
Sucoptionen
HTML IMG TAG — W3SCHOOL
WWW. W3Schools.com ›TAGIS› TAG_IMG
определения WWW.W3SCHOOLS.com. Задает альтернативный текст для изображения, если изображение по какой-либо причине не может быть отображено.
Атрибут Src · Атрибут HTML img loading · Атрибут HTML img ismap · Попробуйте сами
Ähnliche Fragen
Был ли bedeutet img src?
Был ли IMG в HTML?
Warum wird mein Bild bei HTML nicht angezeigt?
Атрибут HTML img src — W3Schools
www.w3schools.com › tags › att_img_src
Обязательный атрибут src указывает URL-адрес изображения. Есть два способа …
HTML-Tag img • Изображение в HTML-сайте — Mediaevent
www.mediaevent.de › html › img
26.01.2022 · img bettet Изображение на веб-сайте ein. Zwei Attribute für img sind wichtig: src und alt. srcset listet альтернатива Bildgrößen für responsive …
: Элемент Image Embed — HTML — MDN Web Docs — Mozilla
developer.mozilla.org › … › HTML › Elements
vor 7 Tagen · Атрибут src является обязательным и содержит путь к изображению, которое вы хотите вставить. · Атрибут alt содержит текстовое описание изображения, …
Попробуйте · Атрибуты · Примеры · Вопросы доступности
Отсутствие тега: Должен иметь начальный тег и не должен иметь закрывающий тег
Разрешенный контент: Нет; это пустой элемент
Категории контента: потоковый контент, фразовый контент, встроенный контент, ощутимый контент. Если элемент имеет атрибут, он также является …
Неявная роль ARIA: с непустым атрибутом или без атрибута: с пустым атрибутом
HTML/Elemente/img – SELFHTML-Wiki
wiki.selfhtml. org › wiki › HTML › Elemente › img
18.08.2022 · Das img-Element ermöglicht es, Bilddateien in einem Dokument einzubinden und darzustellen. Бейшпиль. .
Синтаксис: Начальный тег: notwendig; End-Tag: verboten
HTML/Attribute/src – SELFHTML-Wiki
wiki. selfhtml.org › wiki › Src
18.08.2022 · Das src-Attribut (engl. source für Quelle) referenziert auf die — / Медиенкель. … .
HTML-Tag — W3docs
de.w3docs.com › html-lernen › html-tag-img
Das Tag wird in HTML for die Beschreibung von Bildern verwendet. Das Bild selbst wird im Dokument nicht direkt platziert, der Browser lädt es aus seiner …
HTML-тег — Tutorialspoint
www.tutorialspoint.com › html › html_img_tag
DOCTYPE html>
HTML Grundlagen: Bilder einfügen mit img — Phlow
phlow.de › magazin › webdesign › html › изображение
Mit dem HTML-Tag baust Du eine Bilddatei in ein HTML-Document ein – z.B. JPG-, GIF-, SVG- или PNG-файлы. Mehr Anleitungen zu Bilddateien und Bildformate . ..
HTML — Элемент: — Werner-Zenk.de
werner-zenk.de › html › html_img
Der -Tag benötigt noch das Attribut src=»» in diesem wird der Pfad zu der Bild-Datei angegeben.
Ähnlichesuchanfragen
Img src=URL
CSS img src
HTML img src base64
link40 HTMLHTML img3 position
HTML img src path
Img HTML
Img srcset
transparent-background-gif-image — Google Suche
AlleBilderVideosNewsMapsShoppingBücher
Suchoptionen
Bilder
Alle anzeigen
Alle anzeigen
Ähnliche Fragen
Can GIF изображения имеют прозрачный фон?
Как сделать фон GIF прозрачным?
Создание прозрачного GIF — онлайн-инструменты GIF
onlinegiftools.com › create-transparent-gif
Эта утилита создает прозрачные GIF-файлы. Вы можете удалить одну или несколько цветовых областей и получить анимацию на прозрачном фоне.
Могу ли я сделать GIF с прозрачным фоном? — Справка — Ezgif
ezgif.com › help › gif-transparency
К сожалению нет, формат GIF не поддерживает частичную прозрачность (альфа-канал), то есть любой пиксель может быть только полностью прозрачным или полностью непрозрачным, поэтому …
Как добавить фоновое изображение в прозрачный GIF? — Помощь — Ezgif
ezgif.com › помощь › добавление фона в прозрачность…
Сначала вам понадобится GIF с прозрачным фоном (если у вас есть GIF с однотонным фоном, вы можете преобразовать этот цвет в прозрачность).
GIF с прозрачным фоном — Получите лучший GIF на GIPHY
giphy.com › исследуйте › прозрачный фон
Исследуйте и делитесь лучшими GIF с прозрачным фоном и самыми популярными анимированными GIF здесь, на GIPHY. Найдите забавные GIF-файлы, милые GIF-файлы, реакционные GIF-файлы и многое другое.
Animated Gif Transparent Background — Tenor
tenor.com › поиск › анимированный-gif-transparent-back…
С Tenor, создателем GIF Keyboard, добавьте популярные Animated Gif Transparent Background анимированные GIF-файлы в свои разговоры. Делитесь лучшими GIF прямо сейчас >>>
Как создать GIF с прозрачным фоном — YouTube
www.youtube.com › смотреть
09.08.2019 · Экспортируйте GIF с прозрачным фоном с помощью Adobe After Effects и Photoshop. Найти …
Dauer: 5:42
Прислан: 09.08.2019
Как создать GIF с прозрачным фоном | Быстрый совет
www.youtube.com › смотреть
16.02.2021 · Как создать GIF с прозрачным фоном с помощью Google Slides и EZgif.com …
Дата: 2:45
Прислан: 16.02.2021
Как экспортировать анимированные GIF-файлы (с прозрачным фоном)
www.youtube.com › смотреть
14.10.2021 · В этом руководстве рассматривается процесс экспорта анимированных GIF-файлов из Adobe Animate CC.