HTML & CSS - полноэкранное изображение

-1

Я работаю над веб-сайтом, где хочу image, чтобы сразу же забрать экран. Я хочу, чтобы он занял доступный экран, но , когда вы начинаете прокручивать вниз Я хочу, чтобы div появлялся с текстом и информацией. Я не против, если показывается только часть изображения (например, нижняя часть немного отсутствует). Я могу это сделать, но он не работает на других резолюциях.HTML & CSS - полноэкранное изображение

Я бы предпочел не использовать javascript, но если это единственный способ, я не против.

NEW Еще один способ объяснить, что я пытаюсь сделать, - я хочу, чтобы край от вершины div относился к экрану, так что на всех экранах div появляется, как только вы начинаете двигаться вниз по странице.

источник

2015-06-17 BMJ1260

Можете ли вы показать вам код усилия –

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

Я думаю, вы спрашиваете о Параллаксе.

Исследуйте немного на параллакс в Wiki и увидеть некоторые samples here

источник

2015-06-17 05:04:24

Попробуйте

HTML

<html> 
<body> 
    <div class="imageDiv"></div> 
    <div class="contentDiv"> 
    <h1>This is heading</h1> 
    <p>This is Paragraph</p> 
    </div> 
</body> 
<html>

CSS

*{ 
    margin:0; 
    padding:0; 
} 
html, body{ 
    width:100%; 
    height:100%; 
} 
.imageDiv{ 
    width:100%; 
    height:100%; 
    background:url(http://www.hdwallpapersimages.com/wp-content/uploads/2015/06/Swing-02124.jpg) no-repeat top center #000; 
}

не использовал Нет JQuery

источник

2015-06-17 05:18:34

Не работает, высота достигает 100%. Но не до 100% экрана – BMJ1260

Могу ли я увидеть ваш код? –

Похоже, вы пытаетесь создать сайт параллакса. Его можно сделать только с помощью css и без java-скрипта. Если вы проверите сообщение в блоге Keith Clark, оно должно дать вам хорошую идею. http://keithclark.co.uk/articles/pure-css-parallax-websites/

.parallax { 
    perspective: 1px; 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
.parallax__layer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 
.parallax__layer--base { 
    transform: translateZ(0); 
} 
.parallax__layer--back { 
    transform: translateZ(-1px); 
} 


<div class="parallax"> 
    <div class="parallax__layer parallax__layer--back"> 
    ... 
    </div> 
    <div class="parallax__layer parallax__layer--base"> 
    ... 
    </div> 
</div>

источник

2015-06-17 05:47:02 Cheech

HTML & CSS - полноэкранное изображение

ответ

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