Фоновое изображение CSS не загружается

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

<body background="image.jpeg">

устарел, поэтому я использую, в css,

body {background: url('image.jpeg');}

нет успеха. Вот вся таблица стилей css:

body 
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;        
}
10
background css html image

14 ответов

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

Fiddel:http://jsfiddle.net/287Kw/

body 
{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;


}
1

во-первых, попрощаться с цитаты:

background-image: url(nickcage.jpg); // No quotes around the file name

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

background-image: url(../images/nickcage.jpg); // css and image live in subdorectories

background-image: url(images/nickcage.jpg); // css lives with html but images is a subdirectory

надеюсь, что это помогает.

21

У меня была та же проблема. Проблема оказалась путем к файлу изображения. Убедитесь, что путь к изображению относительно расположения CSS-файла, а не HTML.

7

попробуй такое 

background-image: url("/yourimagefolder/yourimage.jpg");

у меня была такая же проблема, когда я использовал background-image: url("yourimagefolder/yourimage.jpg");

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

3

для меня следующая строка работает для меня, я помещаю ее в css моего тела (где изображение находится в той же папке, в которой мой css и .html файлы):

background: url('test.jpg');

другое, что вы должны заботиться о том, будьте осторожны с расширением изображения, убедитесь, что ваше изображение имеет .jpeg или .расширением jpg. Спасибо

2

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

background-image: url(/resources/img/hero.jpg);

Не забудьте поставить обратную косую черту перед первой папки.

1

Я обнаружил, что проблема в том, что вы не можете использовать короткий URL для изображения "img/image.в JPG"

вы должны использовать полный URL"http://www.website.com/img/image.jpg

0

Я изменил корень документа для моего веб-сервера apache, установленного на wamp-сервере. таким образом, используя относительный url, т. е. (images / img.png) не сработало. Мне пришлось использовать абсолютный url, чтобы он работал, т. е.

фон-изображение: url ("http://localhost/project_x/images/img.формат PNG");

0

следующий код работал для меня, где я поместил изображение в somefolder/assets/img / background_some_img.формат JPG

background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;
0

Если вы размещаете изображение и папку css внутри родительского каталога, предположим, что активы, то следующий код работает отлично. Либо двойные кавычки или без кавычек оба работают нормально. 

body{
   background: url("../image/bg.jpg");
}

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

0

путь к изображению должен быть относительным, это означает, что если файл css находится в папке css, то вы должны начать путь с ../ например 

body{
   background-image: url(../images/logo.jpg);
}

это потому, что вы должны вернуться домой реж ../ путь, а потом /изображение/логотип.формат JPG путь к файлу изображения. Если вы включаете css-файл в сам html

body{
   background-image: url(images/logo.jpg);
}
этот код будет работать нормально.
0

Я хотел бы поделиться своим процессом отладки, потому что я застрял в этой проблеме по крайней мере на час. Не удалось найти изображение при запуске local host. Чтобы добавить некоторый контекст, я создаю стиль в приложении rails в следующем каталоге:

apps/assets/stylesheets/main.scss

Я хотел сделать фоновое изображение в теге заголовка. Ниже приводится моя первоначальная реализация. 

header {
    text-align: center;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('../images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

...в результате я получал следующую ошибку в rails server и консоли в Chrome dev tools, соответственно:

ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)

Я пробовал разные варианты url:

url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK

и это все еще не сработало. В тот момент я был очень смущен...Я решил переместить папку изображений из каталога assets (по умолчанию) в каталог таблиц стилей и попробовал следующие варианты url-адреса:

url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED

Я больше не получил ошибку сервера консоли и rails. Но изображение почему-то не показывалось. После временной сдачи вверх, я узнал, что решение этого было добавить свойство height для отображения изображения... 

header {
    text-align: center;
    height: 390px;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

к сожалению, я до сих пор не уверен, почему 3 начальных попытки url с "../изображения / заголовок.jpg " не работал на localhost, или когда я должен или не должен добавлять точку в начале url-адреса.

это может иметь какое-то отношение к настройке тега ссылки по умолчанию в приложении.формат html.Эрб, или, может быть, это э .scss vs .УСБ вещь. Или, может быть, как работает свойство background с url () (изображение должно находиться в том же каталоге, что и файл css)? Во всяком случае, так я решил проблему с фоновым изображением CSS, не загружающимся на localhost.

0

Я могу принести немного помощи здесь... кажется, что при использовании say background-image: url ("/images / image.jpg"); или фоновое изображение: url ("images / image.jpg"); или фоновое изображение: url("../ изображения / изображение.форматы jpg"); разные браузеры видят это по-разному. первый браузер, похоже, видит это как domain.com/images/image.jpg.... второй браузер видит на domain.com/css/images/image.jpg.... а финал браузер видит как domain.com/PathToImageFile/image.jpg ... надеется на это помогает

0

У меня была такая же проблема и после прочтения этого нашел проблему, это был Слэш. Пути Windows : изображения\green_cup.формат PNG

CSS, который работал: изображения/green_cup.формат PNG

картинки\green_cup.png не работает.

Фил

-2