How to make a landing page with a full screen image?
Question
I would like to make a landing page with an full screen image. Like this: http://startbootstrap.com/templates/stylish-portfolio/
I can figure out the rest of the stuff below it, but how do I go about making the image cover the whole screen?
4 answers
solution1
1 2014-07-25 04:24:26
it is background for the header tag
if you go to line 153 to 163 in stylish_portfolio.css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;}
the backgorund-size is the trick to keep it covering all the screen W3C
---edit
height and width should be 100% so the picture would fit the whole screen on any media.
solution2
-1 2014-07-25 04:25:14
You should take a big size image. then
you html will look like
<html>
<head>
<title>Landing Page</title>
</head>
<body>
<div class="landingbg"> </div>
</body>
</html>
then css will be
.landingbg{
background: url("img/bg.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0);
display: block;
height: 100%;
position: relative;
width: 100%;
}
try this and tell me if there is any issue
solution3
-1 2014-07-25 05:05:43
You probably need a large HD image for background.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For more detail: http://css-tricks.com/perfect-full-page-background-image/
solution4
-2 2014-07-25 04:21:11
Have JQuery function to get width and height of the end-user screen.
var jQueryWidth = $( window ).width();
var jQueryHeight = $( window ).height();
Once you have this, set your HTML image width and height attributes.
<img src="yourImage.jpg" alt="Alternate text" height="<jQueryWidth>" width="<jQueryHeight>">
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.