Фоновое изображение на заголовке не отображается

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

Я знаю, что он есть, но, похоже, он толкается вверх. Когда я проверяю элемент и помещаю его на 200px, он показывает, но прямое вложение кода в файл не выводит его.

//CSS 

* { 
margin: 0; 
padding: 0; 
box-sizing: border-box; 
} 

html { 
color: #555; 
font-family: 'Lato', 'Arial', sans-serif; 
font-weight: 300; 
font-size: 20px; 
text-rendering: optimizeLegibility; 
} 

.row { 
max-width: 1140px; 
} 

.header { 
background: url(img/hero.jpg); 
background-size: cover; 
background-position:center; 
} 

.hero-text-box { 
position: absolute; 
width: 1140px; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 

h1 { 
    margin: 0; 
} 

//HTML 

    <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="vendors/css/fluid- grid.css"> 
    <link rel="stylesheet" type="text/css" href="resources/css/style.css"> 
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'> 
    <title>Test</title> 
    </head> 


    <body> 
     <header> 

      <div class="hero-text-box"> 
      <h1>Welcome to my site</h1> 
      <a href="#">Call me</a> 
      <a href="#">Show me more</a> 

      </div> 

     </header> 

</body> 



</html>

Структура папок

+ index.htm 
+ css 
    + img 
    + style.css 
+ js 
    + scripts.js 
+ img 
+ data

источник

2015-11-29 Matthew Peabody

Изменение .header в header:

header { 
    background: url(img/hero.jpg); 
    background-size: cover; 
    background-position: center; 
}

изображение отсутствует Выпуск

Изменение обратно img/hero.jpg. Следующее, что вам нужно сделать, это об hv. Это неверно. Либо положить его в качестве vh, который также не поддерживается, поэтому, лучше использовать:

header { 
    background-image: url(img/hero.jpg); 
    background-size: cover; 
    background-position:center; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
}

Просмотр

И translate что влияет:

transform: translate(0%, -50%);

См. Вывод: http://output.jsbin.com/furumogoxe

Так что я сделал некоторые изменения также в CSS, используя другой способ:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    color: #555; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    text-rendering: optimizeLegibility; 
 
    height: 100%; 
 
} 
 

 
.row { 
 
    max-width: 1140px; 
 
} 
 

 
header { 
 
    background: url(img/hero.jpg); 
 
    background-size: cover; 
 
    background-position:center; 
 
} 
 

 
.hero-text-box { 
 
    position: absolute; 
 
    width: 1140px; 
 
    max-width: 100%; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
}

<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'> 
 
<header> 
 
    <div class="hero-text-box"> 
 
    <h1>Welcome to my site</h1> 
 
    <a href="#">Call me</a> 
 
    <a href="#">Show me more</a> 
 
    </div> 
 
</header>

источник

2015-11-29 18:20:18

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

@MatthewPeabody Пожалуйста, сохраните изображение относительно вашего пути CSS. –

У меня есть папка css с папкой img с изображением героя. Изображение есть, когда я меняю код, проверяя элемент в браузере, который он показывает. –

Фоновое изображение на заголовке не отображается

ответ

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