it-swarm.com.ru

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;        
}
12
jaredad7

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

Фиддел: 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
Krish

Прежде всего, покажите этим цитатам:

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

Надеюсь, поможет.

24
Frankenscarf

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

8
Timothy Carr

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

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

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

3
Andrew Wiley

попробуй это 

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

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

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

3
user3670684

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

background: url('test.jpg');

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

2
Usman

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

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

это потому, что вы должны вернуться к домашнему каталогу по пути ../ path, а затем /images/logo.jpg path к файлу изображения . Если вы включаете файл CSS в сам HTML

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

1
akaMahesh

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

background-image: url (" http: //localhost/project_x/images/img.png ");

0
user3172852

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

вы должны использовать полный URL " http://www.website.com/img/image.jpg ", но я не знаю почему !!

0
Omar Albeik

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

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

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

0
user1957229

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

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

Я хотел бы поделиться своим процессом отладки, потому что я застрял в этой проблеме по крайней мере на час. Изображение не может быть найдено при запуске локального хоста. Чтобы добавить некоторый контекст, я стилизирую приложение 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

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

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

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

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 с «../images/header.jpg» не сработали на localhost, или когда я должен или не должен добавлять точку в начале URL. 

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

0
George.