Почему не отображается background image css
Перейти к содержимому

Почему не отображается background image css

  • автор:

Не отображается background-image: url(data:image

.zh <
background-image: url(data:image/gif;base64,R0lGODdhEgAMAPQAAP8HAP9yAP91AP92AP80AP8NAP8LAP//AP/gA…AAACwAAAAAEgAMAEAFJuAkjmRpnujEONBkBOkoIRFQNHGu7+MzUYLd4qBITAi83yDJbDpDADs=);
background-repeat: no-repeat;
width: 18px;
height: 12px;
>

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

На сайте с 25.11.2006
26 января 2018, 11:54
Код битый у картинки. /gA…AAACw Что за троеточие?
✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE
На сайте с 21.03.2007
26 января 2018, 11:54
Dram:
Не могу врубиться почему?
span — инлайновый элемент. Попробуйте добавить в стиль display:block;
На сайте с 25.11.2006
26 января 2018, 11:55
Не надо это УГ писать или просто ?>
На сайте с 10.01.2018
26 января 2018, 12:07

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

Теперь по сути вашего вопроса. Всё верно вы подметили, браузер видит эту таблицу стилей и нормально её подтягивает. Но проблема не в таблице стилей, а в HTML-элементе. Вы используете строковый (display: inline;) HTML-элемент , который по умолчанию не имеет ни ширины, ни высоты. Для того, чтобы он заработал, необходимо его сделать блочным (display: block;), либо строчно-блочным (display: inline-block;). Кроме этого, если даже в таком случае он не заработает, значит он пустой в HTML-коде страницы. Потому нужно ему либо добавить содержания в самом HTML-коде страницы, либо же в таблице стилей задать ему ширину (width) и высоту (height). Но только как блочному элементу, поскольку к строчным элементам ширина и высота не применимы.

Коллеги, извините, не могу поправить предыдущее сообщение. Автоматически выставились смайлики, но я имел ввиду следующее:

(display: inline;)
(display: block;)
(display: inline-block;)

Не работает ссылка на картинку

Есть основная папка HTML: в ней наша веб-страничка, картинки, фон сайта , файл style.css. В уроке мы создали папку CSS куда перенесли файл Style, следовательно, картинка (фон блока #block1) background-image перестала работать. Для нее прописала путь уровнем выше, как было показано — background-image: url(‘../42-fon-dlya-sayta.png’); пересохранила проект, но картинка (фон) так и не появилась. А в основной папке HTML создался еще один файл style.css. Возможно из-за него не работает. Проверяла несколько раз все, удаляла дубль style, не помогает

КОД1 Моя первая страница
  • Главная
  • Работы
  • О нас
  • Блог
  • Контакты
  • Самый главный заголовок

    Заголовок поменьше

    Самый маленький заголовок-->

    Обычный текст
    здесь

    Обычный текст тут

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

    Напишите нам

    Орел

    1. Элемент 1
    2. Элемент 2
    3. Элемент 3
    1. Бабочки
      • красные
      • синие
      • зеленые
    2. Шмели
    3. Стрекозы

    КОД2 - стили body < background-color: #008B8B; color:white; >h1 < font-size: 35px; color:blue; font-family: arial; /* шрифт */ text-align: center; >.red < color:#FFB6C1; >#block1 < width: 80%; margin: 0 auto; /* блок по центру */ background-image: url('../42-fon-dlya-sayta.png'); padding: 15px; border: 5px solid rgb(58, 161, 144); border-radius: 30px; >u b < color: blue; >menu < list-style: none; margin: 0 auto; >a < text-decoration: none; font-family: Georgia; transition: .5s linear; >.main-menu < display: block; width: 500px; margin: 0 auto 30px; >.two menu < background: #D4E7EE; overflow: hidden; padding: 0; >.two li < float: left; >.two a < display: block; padding: 1em; border-right: 1px solid #B22222; background: rgba(173, 192, 206, .3); color: #29838C; >.two a:hover < background: #B22222 >img < transform: scale(1); transition: 2s all; >img:hover < transform: scale(1.2); >.img-center

    Почему background image не работает в css

    Ошибка background image может быть вызвана неверным путем к изображению, неправильным указанием свойства background-image в CSS, файл изображения может быть поврежден, или возможно проблема с разрешениями. Чтобы устранить эту проблему, рекомендуется убедиться, что путь к изображению указан правильно, проверить синтаксис использования свойства background-image в CSS, убедиться, что файл изображения не поврежден, и что у вас есть правильные разрешения для доступа к файлу изображения.

    background — image

    Полезное свойство, если нужно поставить на фон картинку или задать декоративное изображение. Можно даже градиент!

    Время чтения: меньше 5 мин

    Открыть/закрыть навигацию по статье

    1. Кратко
    2. Пример
    3. Как пишется
      1. Картинка плюс цвет
      2. Несколько фоновых картинок
      3. Градиент на фоне
      1. Егор Левченко советует
      2. Алёна Батицкая советует

      Контрибьюторы:

      Обновлено 31 декабря 2023

      Кратко

      Скопировать ссылку «Кратко» Скопировано

      Свойство background — image задаёт элементу фоновую картинку.

      Пример

      Скопировать ссылку «Пример» Скопировано

       div  background-image: url("фоновое-изображение.jpg");> div  background-image: url("фоновое-изображение.jpg"); >      

      Как пишется

      Скопировать ссылку «Как пишется» Скопировано

       div  background-image: url("адрес-картинки");> div  background-image: url("адрес-картинки"); >      
      • url — адрес картинки, он пишется в кавычках внутри скобок: url ( «cat _ box . png» ) .
      • none — сбрасывает фоновую картинку (значение по умолчанию).

      Границы картинки и её расположение относительно краёв элемента мы задаём с помощью background — clip и background — origin .

      Картинка плюс цвет

      Скопировать ссылку «Картинка плюс цвет» Скопировано

      Элементу желательно задать одновременно и цвет фона background — color , и фоновую картинку. Если картинка не загрузится, то вместо неё пользователь увидит фоновый цвет.

       body  background-image: url("background.png"); background-color: #09ff00;> body  background-image: url("background.png"); background-color: #09ff00; >      

      Несколько фоновых картинок

      Скопировать ссылку «Несколько фоновых картинок» Скопировано

      Фоновых картинок можно задать сколько угодно. Они будут накладываться друг на друга, причём сверху будет та, которая указана в списке первой. Если у картинки прозрачный фон, то под ней будет видна следующая. И так до бесконечности.

       body  background-image: url("confetti.png"), url("landscape.jpg"); background-color: gray;> body  background-image: url("confetti.png"), url("landscape.jpg"); background-color: gray; >      

      Если у первой картинки фон не прозрачный, то следующая по счёту картинка будет видна только в случае, если первая не загрузилась.

      Градиент на фоне

      Скопировать ссылку «Градиент на фоне» Скопировано

      С помощью background — image также можно сделать градиентный фон. Например, так:

       div  background-image: linear-gradient(red, yellow, green);> div  background-image: linear-gradient(red, yellow, green); >      

      Подробнее о градиентах можно прочитать в статьях о linear — gradient , radial — gradient и conic — gradient ( ) .

      Подсказки

      Скопировать ссылку «Подсказки» Скопировано

      �� Разные браузеры могут отображать фоновую картинку по-разному. Например, если вы задаёте фоновую картинку внутри таблицы для одной строки целиком, то Chrome и Safari продублируют эту картинку в каждой ячейке, тогда как остальные растянут картинку на всю строку.

      На практике

      Скопировать ссылку «На практике» Скопировано

      Егор Левченко советует

      Скопировать ссылку «Егор Левченко советует» Скопировано

      Чтобы это исправить, нужно добавить элементу необходимые ширину и высоту. А ещё не забыть про background — repeat и background — size , чтобы фон выглядел отлично.

      Алёна Батицкая советует

      Скопировать ссылку «Алёна Батицкая советует» Скопировано

      �� Если задаём фоновую картинку для блока со светлым текстом, то обязательно задаём и фоновый цвет.

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

      Пример ниже не пустой, но в нём не загрузилась фоновая картинка:

         

      Фронтенд-блог: чиним вёрстку одной строкой

      div> h1>Фронтенд-блог: чиним вёрстку одной строкойh1> div>
       div  background-image: url("broken-link-to-image.png");> h1  color: white;> div  background-image: url("broken-link-to-image.png"); > h1  color: white; >      

      Чиним одной строкой:

       .element  background-image: url("broken-link-to-image.png"); background-color: #18191C;> .element  background-image: url("broken-link-to-image.png"); background-color: #18191C; >      

      Да, будет не так красиво, как нарисовал дизайнер, но вся информация будет доступна.

      �� Кроме линейного градиента можно задавать радиальный — круглый — градиент. Для этого нужно написать следующее:

       div class="spread-gradient">div> div class="smooth-circle">div> div class="sharp-circle">div>      
       .spread-gradient,.smooth-circle,.sharp-circle  width: 200px; height: 200px;> .spread-gradient  background-image: radial-gradient(#e6e6e6, #1a5ad7);> .smooth-circle  background-image: radial-gradient(#e6e6e6, #1a5ad7 70%);> .sharp-circle  background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%);> .spread-gradient, .smooth-circle, .sharp-circle  width: 200px; height: 200px; > .spread-gradient  background-image: radial-gradient(#e6e6e6, #1a5ad7); > .smooth-circle  background-image: radial-gradient(#e6e6e6, #1a5ad7 70%); > .sharp-circle  background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%); >      

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

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