2013-09-14 5 views
-1

Я новичок в кодировании и буду очень признателен за помощь в решении проблемы, с которой я сталкиваюсь. Я пытаюсь ссылаться на изображение внутри div, но когда я проверяю его браузер, изображение не отображается. Я следую этому руководству: http://www.youtube.com/watch?v=j4kTLpezHDI&list=PL52E0F0A024E913AE.Div фоновое изображение не отображается

CSS:

.banner { 
    background: url(../img/city-bg.jpg) no-repeat; 
    width: 695px; 
    height: 271px; 
} 

HTML:

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Black + White</title> 
    <link rel="stylesheet" type="text/css" "style.css"> 
</head> 
<body> 

<div class="container_12"> 
    <header> 
    <h1>Black + White</h1> 
    <nav> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Our Services</a></li> 
     <li><a href="#">How We Work</a></li> 
     <li><a href="#">Testimonials</a></li> 
     <li><a href="#">Work Examples</a></li></ul> 
    </nav> 
    <div class="banner grid_10"> 
    <p>Some slick phrase would go in here to sum up what the business actually does and stands for.</p> 
    </div> 
    <div class="grid_2"></div> 
</header> 
<div class="main"> 
    <div class="grid_5"> 
     <h1>Services we offer</h1> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
     <p><a href="#" class="button">Read more</a></p> 
    </div> 
    <div class="grid_5"> 
     <h1>How we work</h1> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
     <p><a href="#" class="button">Read more</a></p> 
    </div> 
    <div class="grid_2"> 
     <blockquote> 
      <p>Clean, elegant typography 
      matched with sharp lines 
      and precise spacing leads 
      to a professional look 
      and feel</p> 
     </blockquote> 
    </div> 
</div> 
<footer><p><strong>black+white themes via </strong><a href="http://themeforest.net">Themeforest</a></p></footer> 
</div> 

</body> 
</html> 

ответ

3
<link rel="stylesheet" type="text/css" "style.css"> 
--------------------------------------^------------ 

Вы упускаете href:

<link rel="stylesheet" type="text/css" href="style.css"> 

starting with HTML + CSS

+0

Спасибо, что пропустили это. Он все еще не отображается, хотя –

+1

Является ли ваш путь изображения хорошим? Когда вы проверяете, вы получаете какую-либо ошибку? – Vucko

+0

@AlexanderAndersen ваш код работает с модификацией кода Vucko. вы можете добавить неправильный путь к своему изображению. см. это http://jsfiddle.net/JxqZC/ – Ayush

0

Возможно, вы, вероятно, пропустите href в теге ссылки.

Я настоятельно рекомендую использовать инструменты проверки элементов браузера для проверки ошибок такого типа, они просты в использовании, и они избавят вас от многих неприятностей. Загрузите, установите и используйте инструмент проверки элемента кода в своем браузере: Firebug для firefox, DragonFly для Opera или используйте встроенный инструмент для Chrome. Вы можете перейти к этому элементу в HTML-коде и проверить, правильно ли используется код. Вы также можете выполнять временные изменения HTML/JS/CSS «на лету», чтобы протестировать его. Это может быть полезно в целом в веб-разработке, чтобы проверить код, если код выполняется по желанию в браузерах, или внести изменения в тестовые примеры и все.

+0

Я добавил href раньше, когда получил подсказку, которую я пропустил. Я пробовал проверять в хроме, но он даже не может найти изображение. –

+0

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

+0

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

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