Фоновое изображение, охватывающее весь контент

Я хочу добиться эффекта, подобного фоновому изображению на мобильном сайте Twitter для iPhone/Android (screenshot of it).Фоновое изображение, охватывающее весь контент

Мое решение работает, когда содержимое соответствует экрану, но если есть прокрутка, он разрывается.

Это CSS я использую:

.welcome body{ 
    background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat top left; 
    z-index: -1; 
    background-clip: border-box; 
    -webkit-background-clip: border-box; 
    background-origin: padding-box; 
    -webkit-background-origin: padding-box; 
    background-size: cover; 
    -webkit-background-size: cover; 
} 

html.welcome, .welcome body{ 
    height: 100%; 
}

источник

2013-04-21 gberger

Вы должны установить свой фон не прокручивать:

background-attachment: fixed;

Re: ваш комментарий, изменить CSS на:

html { 
    background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat center center fixed; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
}

Это будет полноэкранный, любого размера, а не прокрутка.

Только оговорка это не будет работать с браузерами, отличными от CSS3 (они должны работать в любых Chrome, Firefox 3.6+, IE8 + и Opera 10+).

источник

2013-04-21 21:47:45

Ну, это делает его не уродливым, но все же не идеальным! Я хотел, чтобы высота фонового изображения была равна высоте содержимого. Не уверен, если я буду чист. Спасибо за помощь! – gberger

@GuilhermeBerger - Отредактированный ответ, должен быть тем, что вы ищете. –

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

Какое поведение вы намерены предпринять? Если содержание больше фонового изображения, оно просто не будет работать. Вы могли бы добавить положение: зафиксировано на теле, если это то, чего вы хотите достичь.

источник

2013-04-21 21:49:47 hannenz

Я хотел сделать высоту фонового изображения равной высоте содержимого. Не уверен, если я буду чист. – gberger

Фоновое изображение, охватывающее весь контент

ответ

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