HTML & CSS - Full Screen Image
Question
I'm working on a website where I want an image to straight away take up the screen. I want to make it take up the available screen but when you begin to scroll down I want a div to appear with the text and information. I do not mind if only some of the image is showing (like the bottom is slightly missing). I can do it, but it doesn't work on other resolutions .
I would rather not use javascript but if it is the only way I don't mind.
NEW another way of explaining what I'm trying to do is, I want the margin from the top of a div relative to the screen, so that on all screens the div appears as soon as you begin to move down the page.
3 answers
solution1
1 ACCPTED 2015-06-17 05:04:24
I think you are asking about Parallax.
Explore a bit on Parallax in Wiki and see some samples here
solution2
0 2015-06-17 05:18:34
Try this
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;
}
No jquery has used
solution3
0 2015-06-17 05:47:02
It sounds like you are trying to build a parallax website. Its possible to do this with only css and no java script. If you check you Keith Clark's blog post it should give you a good idea.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.