Не работает background-image

@Ann1984 · Регистрация: 09.10.2018

Author24 — интернет-сервис помощи студентам

Здравствуйте. У меня такая проблема. Свойство background-image не работает в файле css. Я понимаю, что дело скорее всего в местоположении картинки. Но не понимаю, что не так я оформила. Я перебрала уже многие комбинации из гугла, но ничего не помогло. Может кто-нибудь подскажет? Причем, если вместо background-image (картинка), указать background-color, то фон закрашивает правильно. А так, белый фон.
Вот код стиля

HTML5

BODY {font-family: Times New Roman;
background-image: url ( ..img/18.jpg  )  }  
P {text-align: justify; font-size: 13pt; text-indent: 2em} 
P.green {text-align: justify;color: green} 
P.red { text-align: justify;color:red } 
P.blue {font-style:italic; text-align: justify;color:blue }
P.pink { text-align: justify;color:PaleVioletRed } 
 
.color  {color: LimeGreen}
.style {font-style:oblique;color: MediumBlue}
P.first { font-family: Times New Roman;  font-style:oblique; font-weight: 900;font-size: 25pt; text-align: center;color:purple  }
A:LINK {color: #4B0082}  
A:VISITED {color: #800080} 
A:ACTIVE {color: #8A2BE2} 
A:HOVER {color: #DA70D6; text-decoration: none}

@Qwerty_Wasd · 10.01.2019, 11:20

Ann1984, во-первых проверьте путь до изображения, присутствует ли картинка по указанному адресу.
Во-вторых, попробуйте

CSS

BODY {
  font-family: Times New Roman;
  background: url ( ..img/18.jpg  ) no-repeat center;
  background-size: cover;
}

@Ann1984 · 10.01.2019, 12:25 **[ТС]**

Qwerty_Wasd, путь проверила. Картинка на месте.
Ваш код попробовала, тоже не сработал.
Не может быть причина в весе картинки? (читала о таком на просторах), но она и весит всего 28 КБ.
И по поводу местоположения картинки. Она лежит в папке css, в этой же папке лежит и сам файл css. Но она помещена еще в папку img. Может я что-то тут напутала?

@Опан · 10.01.2019, 13:26

Попробуйте без точек и пробела перед скобками:

CSS

1	background: url(img/18.jpg);

@Ann1984 · 10.01.2019, 13:34 **[ТС]**

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

@Klo606 · 17.03.2023, 13:17

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

Кликните здесь для просмотра всего текста

background-image не работает если: 1- неверный синтаксис либо 2-неправильный путь. Что касается синтаксиса, путем проб работали следующие варианты с пробелами и кавычками и без них

Кликните здесь для просмотра всего текста

background-image:url( ../images/metalic-cup.gif );
background-image: url( ../images/metalic-cup.gif );
background-image:url('../images/metalic-cup.gif');
background-image:url("../images/metalic-cup.gif");
background-image: url('../images/metalic-cup.gif');
background-image: url("../images/metalic-cup.gif");
background-image: url( '../images/metalic-cup.gif' );
background-image: url( "../images/metalic-cup.gif" );

Главное между URL и открывающей скобкой не ставить пробел !
Что касается пути, многие новички (в т.ч. и я) не могли понять почему относительный путь, указанный в HTML срабатывает, а тот же путь скопированный в CSS - нет. Проблема в пути и относительном расположении файлов: html, css и изображения. Когда указание background-image происходит непосредственно в html-файле, то и путь до изображения следует представлять относительно этого HTMLфайла. В случае, когда в CSS-файле мы указываем background-image , следует брать во внимание путь от CSS-файла до изображения, а не путь от HTML до изображения.

@Ann1984 0 / 0 / 0 Регистрация: 09.10.2018 Сообщений: 87
	10.01.2019, 12:25 [ТС]	3
	Qwerty_Wasd, путь проверила. Картинка на месте. Ваш код попробовала, тоже не сработал. Не может быть причина в весе картинки? (читала о таком на просторах), но она и весит всего 28 КБ. И по поводу местоположения картинки. Она лежит в папке css, в этой же папке лежит и сам файл css. Но она помещена еще в папку img. Может я что-то тут напутала? 0

@Ann1984 0 / 0 / 0 Регистрация: 09.10.2018 Сообщений: 87
	10.01.2019, 13:34 [ТС]	5
	Опан , спасибо огромное. Помогло. Значит путь я все-таки указала правильно, все дело было в пробелах. Про них я даже и не думала. 0

@Klo606 3 / 1 / 2 Регистрация: 19.09.2019 Сообщений: 9
	17.03.2023, 13:17	6
	ответ с бородой, тем не менее может помочь новичкам понять суть проблемы, почему один и тот же путь работает в HTML, а в CSS - нет. Кликните здесь для просмотра всего текста background-image не работает если: 1- неверный синтаксис либо 2-неправильный путь. Что касается синтаксиса, путем проб работали следующие варианты с пробелами и кавычками и без них Кликните здесь для просмотра всего текста background-image:url( ../images/metalic-cup.gif ); background-image: url( ../images/metalic-cup.gif ); background-image:url('../images/metalic-cup.gif'); background-image:url("../images/metalic-cup.gif"); background-image: url('../images/metalic-cup.gif'); background-image: url("../images/metalic-cup.gif"); background-image: url( '../images/metalic-cup.gif' ); background-image: url( "../images/metalic-cup.gif" ); Главное между URL и открывающей скобкой не ставить пробел ! Что касается пути, многие новички (в т.ч. и я) не могли понять почему относительный путь, указанный в HTML срабатывает, а тот же путь скопированный в CSS - нет. Проблема в пути и относительном расположении файлов: html, css и изображения. Когда указание background-image происходит непосредственно в html-файле, то и путь до изображения следует представлять относительно этого HTMLфайла. В случае, когда в CSS-файле мы указываем background-image , следует брать во внимание путь от CSS-файла до изображения, а не путь от HTML до изображения. 0

Не работает background-image

Решение