Нужно использовать фоновое изображение для пропорционального охвата всего заголовка

Я пытаюсь сделать фоновое изображение охватывающим весь заголовок в CSS, но только верхняя часть моего изображения отображается, когда я использую функцию «background-size: cover» CSS. Как сделать все мое изображение на фоне заголовка? Заранее спасибо!Нужно использовать фоновое изображение для пропорционального охвата всего заголовка

CSS:

header { 
    background: url("file:///Users/FilePath/image.jpg"); 
    background-size: cover; 
    color: white; 
    padding: 10px; 
    text-align: center; 
    border-bottom-style: ridge; 
    border-bottom-width: 5px; 
}

HTML:

<html> 
    <title>My Page</title> 
    <body> 
    <header> 
     <h1>Hello World</h1> 
    </header> 
    <section> 
    <p> My First Section </p> 
    </section> 
    </body> 
</html>

источник

2015-11-04 mtaggart

Я не уверен в ситуации изображения, но это может быть так, что ваша ширина изображения меньше ширины заголовка, поэтому, когда вы делаете «обложку», она растягивает изображение пропорционально ширине/высоте, чтобы заполнить заголовок, создавая его, как будто вы видите только верхнюю часть изображения. См. Пример: http://jsfiddle.net/ad8ht837/ – Liquidchrome

Ваш запрос невозможен, если заголовок всегда не поддерживает пропорции изображения. Видимо, это не так. – isherwood

попробуйте добавить это: background-size: содержать; background-position: 50% 0; background-repeat: no-repeat; – Liquidchrome

Попробуйте это:

html, body{margin:0; height:100%;} 

header { 
     height:100vh; 
     background:url("file:///Users/FilePath/image.jpg") 50%/cover 
    }

источник

2015-11-04 20:02:27

Это выполнило именно то, что мне было нужно - покрыло весь заголовок и, казалось, поддерживало соотношение сторон изображения. Спасибо Амиру !!! – mtaggart

@mtaggart, добро пожаловать! –

-1

ли вы попробуете фон-размер: 100% 100%; ?

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

источник

2015-11-04 19:53:53 Mattydevicce

Довольно уверен, что размер фона: 100% 100% - это решение вопроса, но нужно наглядность от mtaggart о том, что было предназначено. В любом случае, ссылка содержит отличную демонстрацию, чтобы найти то, что нужно. –

Хорошая точка. Это показывает, что в примере. – Mattydevicce

'содержать' не будет охватывать весь заголовок для большинства ситуаций. – isherwood

Попробуйте сделать фон-размер: 100%;

источник

2015-11-04 19:58:10 Daniel

В соответствии с моими комментариями:

background: #ccc url("http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat; 
    background-size: contain; 
    background-position: 50% 0;

http://jsfiddle.net/ad8ht837/1/

источник

2015-11-04 20:00:33 Liquidchrome

Нужно использовать фоновое изображение для пропорционального охвата всего заголовка

ответ

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