CSS background image не будет отображаться

Для жизни я не могу получить простое фоновое изображение, чтобы показать, используя CSS. У меня есть мертвый простой HTML страницы:CSS background image не будет отображаться

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>My Website</title> 
<LINK href="./css/styles.css" rel=StyleSheet type="text/css"> 
</head> 
<body> 
<p>foo</p> 
</body> 
</html>

И на следующей странице CSS:

body { 
    background:url('./images/myBackground.jpg'); 
}

И все же образ никогда не показывает. Я искал это, и многие люди, похоже, столкнулись с этой же проблемой, но ни одно из решений не сработало. Я пробовал каждую комбинацию синтаксиса CSS, о котором я могу думать (фон, фоновое изображение, кавычки, одинарные кавычки, двойные кавычки, косая черта, без косой черты и т. Д.) - не повезло. Я попытался поместить изображение в тот же каталог, что и HTML-страница, не повезло. Я попытался сделать квадратный div и установить его фон на этот образ - не повезло. Я пробовал устанавливать фиксированную высоту и ширину - не повезло.

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

p { 
    color: blue; 
}

и что работает. Я пропустил что-то невероятно очевидное здесь? Я могу сделать это inline, но я бы предпочел использовать CSS, и теперь я просто хочу сделать это из упрямства и принципала.

источник

2015-02-08 SourMonk

Возможно, './Images/myBackground.png' или что бы вы не расширили для своего имени? –

Неплохо, на самом деле у меня есть расширение файла – SourMonk

Пожалуйста, измените свое сообщение, чтобы это отразить. –

Вам нужно поставить дополнительный "" перед адресом.

Теперь вы ссылаетесь на/css/images/mybackground.

Если вы добавите дополнительный «.». перед ним, например ../images/myBackground (и добавьте расширение, как указано)

Он должен работать. (По крайней мере, в моем воспроизведении вашей ситуации.)

источник

2015-02-08 15:17:02 Clemenz

это звучит правильно на самом деле, по какой-то причине я принял единую точку как намеренную. –

Я просто поднял консоль, и это то, что происходит. Там было большое, красное сообщение «Не удалось загрузить ресурс» ... – SourMonk

Я использовал ваш код точно так, как указано вами. (с расширением). Консоль дала мне ту же ошибку, что и вы. Но когда я изменил его на background-image: url ("../ images/myBackground.jpg"); это сработало для меня. – Clemenz

Вы должны использовать расширение .png, .jpg, .gif и т.д.

background:url('../images/myBackground.png'); 

background:url('../images/myBackground.jpg');

источник

2015-02-08 15:13:07

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

CSS background image не будет отображаться

ответ

Смежные вопросы