Почему мое фоновое изображение не появится?

Любая соответствующая информация: Я пытаюсь создать сайт с портфолио, но я столкнулся с проблемой. Я хотел использовать изображение как заголовок, но по какой-то причине он просто не будет отображаться.Почему мое фоновое изображение не появится?

Мой вопрос (короткий): В чем причина того, что изображение моего заголовка не будет отображаться? (любой совет на будущее будут оценены!)

Ниже вы увидите мой текущий синтаксис. Я хотел добавить ссылку jsfiddle, но поскольку все относится к изображениям, которые у меня есть на моем компьютере, я подумал, что будет проще загружать всю мою папку. HERE ссылка на этот

HTML

<head> 
    <title>index</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="container">  
     <div id="header"></div><!-- end header --> 

     <div id="menu"> 
      <ul> 
       <li><a href="index.php"><img border="0" id="homebutton" alt="" src="img/home button.png" width="145px" height="auto"></a></li> 
       <li><a href="about.php"><img border="0" id="aboutbutton" alt="" src="img/about button.png" width="145px" height="auto"></a></li> 
       <li><a href="gallery.php"><img border="0" id="gallerybutton" alt="" src="img/gallery button.png" width="145px" height="auto"></a></li> 
       <li><a href="contact.php"><img border="0" id="contactbutton" alt="" src="img/contact button.png" width="145px" height="auto"></a></li> 
      </ul> 
     </div><!-- end menu --> 

     <div id="content"></div><!-- einde content -->  
    </div><!-- end container -->  
</body>

CSS

#container { 
    margin: 0px auto; 
    padding: 10px; 
    width: 1300px; 
} 

#header { 
    background-image: url("img/header.png"); 
    background-repeat: no-repeat; 
    width: 1300px; 
    height: auto; 
    max-height: 275px; 
} 

#menu ul { 
    margin: 0; 
    padding: 0; 
    list-style:none; 
} 

#menu ul li { 
    float: left; 
}

источник

2015-02-11 PeterPrakker

Вы нажали кнопку f12 и вошли в элементы, чтобы увидеть, есть ли в DOM? – rekoDolph

Попробуйте установить некоторую высоту в заголовок, например 'height: 200px;' –

Является ли ваш CSS в другой папке? Потому что, если это так, вы должны добавить 'url (" ../ path/image.png ")' – Cheshire

Вы фактический height является 0px, так что вы можете» видеть это. Вам также нужно написать размер, например height: 10px; или min-height: 10px.

источник

2015-02-11 12:33:57

Это происходит потому, что в заголовке, вы только настройки max-height и height к auto, вы должны включите в него min-height.

источник

2015-02-11 12:29:43

Спасибо! (и все остальные) Настройка min-height сделала это для меня :) – PeterPrakker

попытка не меняя max-height: 275px; к min-height:275px;

div имеет не содержание так по умолчанию, чтобы быть 0px высокой

источник

2015-02-11 12:29:47 Oliverb

Вы использовали изображение в качестве фона, но фоне чего? (Я имею в виду не размер заголовка div, поэтому фон не может быть отображена)

Вы должны увеличить размер (width/height) в <div id="header"></div>

источник

2015-02-11 12:32:17 harcos

на вашем #header, изменить

height:auto;

к чему-то вроде

height: 200px; //or whatever the height of your img is

Проблема здесь состоит в том, что ваши div по умолчанию height: 0px; и, следовательно, нет места для вашего изображения, чтобы показать.

В качестве альтернативы, вам нужно как минимум установить min-height на div, чтобы изображение могло отображаться.

источник

2015-02-11 12:36:24 kevin

Прежде всего, установите высоту для вашего header. Когда вы устанавливаете max-height, вы говорите, что высота не может пройти это число, но ваш заголовок пуст, поэтому высота будет 0.

Во-вторых, будьте осторожны с дорожками.Пусть в вашем HTML путь был img/image.png, но ваш файл css находится в папке с именем styles. Если это ваш случай, не забудьте добавить относительный путь к изображению из папки стилей, background-image: url("../relative/path/to/image.png");

источник

2015-02-11 12:37:23 Cheshire

Ваша проблема - css, #header. Попробуйте width:100px вместо width:auto. (Пример 100px). Это работает для меня.

источник

2015-02-11 12:37:24

Если файл HTML находится в корне, синтаксис будет хорошо на изображение, но еще это может быть вместо:
background-image: url("img/header.png");
background-image: url("/img/header.png"); (обратите внимание на «/» в URL)

Или имя из образ. Или расширение.

источник

2015-02-11 15:38:09 vldfr

Почему мое фоновое изображение не появится?

ответ

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