Почему я не могу масштабировать это изображение в заголовке?

Я новичок в HTML/CSS, и я пытаюсь выяснить, что я узнал до сих пор.Почему я не могу масштабировать это изображение в заголовке?

У меня есть заголовок, но я хочу фоновое изображение внутри заголовка. Независимо от того, что я делаю, я не могу получить изображение в масштабе в заголовке. Это либо плитка, либо такая большая, что я не вижу изображение в заголовке.

Вот мой рабочий код до сих пор:

<style> 
header { 
     text-align: center; 
     font-family: 'Permanent Marker', cursive; 
     color: #AA1166; 
     max-height: 500px; 
     background-image: url("http://i.imgur.com/8ClzWQ5.jpg"); 
     background-repeat: no-repeat; 
     background-size: cover;

Опять же, я новичок так что, возможно, что я пытаюсь сделать что-то, что я не узнал правильный код для. Может кто-то пролил свет?

источник

2014-09-15 Amdeto89

вы делаете это правильно, вы должны уточнить свой вопрос, что точно вы ожидаете? также попробуйте изменить «background-position» на 'top', например, и посмотреть, помогает ли это. вам также лучше использовать прямоугольное изображение, имеющее такое же отношение к вашему элементу заголовка. – iSWORD

Я загрузил фотографию размером 400x310, и мне хотелось бы, чтобы вся фотография вписывалась в заголовок, однако она только показывает ее части или черепицу. Это 3-й день обучения, поэтому я не уверен, что мой мыслительный процесс, способный масштабировать фотографию внутри заголовка, является первой проблемой ... – Amdeto89

Это 'содержать', который вы ищете? http://jsfiddle.net/L2z31j9q/ – Jack

-3

вы упускаете height свойство

источник

2014-09-15 03:02:33

Я хочу фоновое изображение в заголовке

Пожалуйста, проверьте коды ниже.

<style type="text/css"> 
header { 
text-align: center; 
font-family: 'Permanent Marker', cursive; 
color: #AA1166; 
background-image: url("http://i.imgur.com/b6y6Xvb.jpg"); 
background-repeat: no-repeat; 
background-size: cover; 
background-color: #666; 
width:960px; 
height: 200px; 
margin: 0 auto;

}

источник

2014-09-15 03:12:45 GBernaldez

Вы можете сделать это, как этот

header { 
    background: url(http://i.imgur.com/8ClzWQ5.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    text-align: center; 
    font-family: 'Permanent Marker', cursive; 
    color: #AA1166; 
    min-height:300px; 
    max-height: 500px; 
}

источник

2014-09-15 03:27:09

Смотрите ниже код

header { 
     text-align: center; 
     font-family: 'Permanent Marker', cursive; 
     color: #AA1166; 
     height: 500px; 
     background-image: url("http://i.imgur.com/8ClzWQ5.jpg"); 
     background-repeat: no-repeat; 
     background-position: center top; 
     background-size: 100% auto; 
}

источник

2014-09-15 04:57:29 Target

Почему я не могу масштабировать это изображение в заголовке?

ответ

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