Как фиксировать изображение на каждом разрешении экрана?

Я ищу помощь в том, как сохранить изображение в соответствии со всем экраном на любом разрешении экрана. Однако изображение не является фоном. Это просто обложка и при прокрутке вниз, когда вы будете просматривать содержимое веб-сайта. Примером может служить этот сайт: http://riotdesign.eu/en/ Я по существу ищу ту же идею.Как фиксировать изображение на каждом разрешении экрана?

Прямо сейчас мой div установлен в эти параметры. Однако высота изображения будет растягиваться дальше, если я установил 100% или установил px. Было бы проще, если бы контент перекрывал изображение внизу, чтобы скрыть его немного? См. Ниже для css div.

#cover{ 
width:100%; 
height: 1000px; 
margin: auto; 
}

источник

2015-02-12 user3003228

Если я верну свой вопрос, вы ищете 'Parallax Plugin jQuery '

Пример: Simple Parallax Scrolling

источник

2015-02-12 16:29:05

Это может быть очень полезно для меня, спасибо вам, Navid. Один вопрос: есть ли способ, чтобы содержимое сайта отображалось после одного прокрутки по любому разрешению? В вашем примере выше, в зависимости от разрешения, содержимое можно увидеть без прокрутки вниз. – user3003228

Можете ли вы уточнить немного больше PLS? –

в URL-адресе, указанном в вопросе, изображение «серое заднее заземление» займет весь экран независимо от того, какое разрешение вы его просматриваете. Это первое, чего я хотел бы достичь. Во-вторых, на этой странице вы можете просматривать остальную часть контента (белый фон с «Только хороший дизайн, созданный в названии Empoli (Флоренция)», если вы прокрутите вниз, и это снова относится к любому разрешению экрана, на котором вы смотрите. – user3003228

Вы можете использовать:

body { 
    background : url("your/image/path") no-repeat center; 
}

Проблема, кажется, быть: ДИВ вы используете, не охватывают полный размер вашего документа HTML

источник

2015-02-12 15:48:17 Tony

что вы хотите position:fixed:

* { 
 
    margin:0; 
 
    padding:0; 
 
    left:0; 
 
    top:0; 
 
} 
 
.bgContainer, .bgContainer img { 
 
    width:100%; 
 
    height:100%; 
 
    position: fixed; 
 
}

<div class='bgContainer'> 
 
    <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg"></img> 
 
</div>

Fiddle для вашего удобства:

источник

2015-02-12 15:53:41 Banana

Привет банан с фиксированным изображение не будет иметь возможность прокручивать со страницей правильной? Я не обязательно смотрю, как это фон, но просто обложка. Я хочу, чтобы он работал как ссылка выше, без слайдера. спасибо – user3003228

@ user3003228 вы можете прокручивать страницу, как правило, jsut изображение останется фиксированным – Banana

понял, только интересно, можете ли вы прокручивать изображение с содержимым, а начало содержимого появляется после прокрутки вниз? – user3003228

Вы можете использовать JQuery, чтобы получить высоту браузера на изменении размера, а затем применить эту высоту в слайд-шоу

$(window).height();

Вот скрипка, которая изменяет высоту ее div в соответствии с размером браузера http://jsfiddle.net/hxn9fe5b/

источник

2015-02-12 16:14:01 RouthMedia

Как фиксировать изображение на каждом разрешении экрана?

ответ

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