I'm brand new to this site so apologies if I'm stepping on toes but I've been trying to create a page where you are met by a fullscreen header, with a height and width of 100% of the viewport, however you are still able to scroll to the content below.
Perfect example of this is http://www.bklynsoap.com/
I have tried to achieve this with purely CSS by creating a 100% height and width on an absolute positioned Div, but this hides the content below.
No need for absolute position in this. Your example uses javascript to change the size of the div and the content inside.
You can do this with pure CSS
Example:
<html>
<body>
<section class="fullscreen"></section>
<section class="other-content></section>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
}
.fullscrenn {
height: 100%;
width: 100%;
background: url('../images/fullscreen.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I know this problem is common and plenty of users have asked there for a solution and of course, I did read answers to these questions but nothing has helped for me.
This is how does the website look like when it is first rendered. All things are working just fine, the image is covering the whole page.
Then I try to scroll down and with an approximately 50% chance this is happening.
The scrollbar is hidden but the ugly white stripe appears at the bottom. When I stop scrolling the image stretches itself to the proper position. But the scrolling experience is ruined because of that white stripe.
Any helping hands for this?
<div className="flex" style={{height: height, minHeight: "576px" }}>
....
</div>
html {
background: url(./bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
Updated Suggestion:
Please check this second attempt:
https://codepen.io/panchroma/pen/NWXVvbL
(or a preview link that will eventually expire:
https://cdpn.io/pen/debug/NWXVvbL?authentication_hash=wQMPobNYVpdk )
the change is how the background image is added:
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(./bg.jpg)
no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The credit for this second suggestion belongs to Vincent
background: fixed no repeat not working on mobile
Please note that my original solution below isn't a good solution because of how mobile devices handle fixed background images.
===========
How does this look for you?
https://codepen.io/panchroma/pen/RwxmVPY
It's forcing the HTML element to be 100vh. For illustration, I removed the styling on your .flex class, it's not needed to solve your image background question.
And I also added a viewport meta tag to the head of the page
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML
<div class="flex">
...
</div>
CSS
html {
background: url(./bg.jpg) no-repeat center center fixed;
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh; /* NEW */
}
/* .flex styling removed */
/* .flex{
height: height, minHeight: "576px";
} */
I am creating a website, however I would like the website to have a full screen div (Like this: http://peet.io)
However I do not know what is wrong with my code, I have tried googling several times, but still no help.
This is my code:
http://jsfiddle.net/6p3dk2yo/
.introduction {
height: 100%;
width: 100%;
background: url('../images/header.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: absolute;
}
That is my introduction css code.
However it only show's my test div and not my introduction div which is what I need the most, is not showing, the 'test' div is making it hidden.
If anyone knows how i can fix this then please say:)
That is because setting height: 100% simply means "stretch to the height of element's content". And since it is an empty <div> element, a height of 100% simply computes to 0px.
What you can do though, is to use vw or vh units when it comes to dimensions (see browser compatibility and support) that have to be calculated relative to the viewport size:
.introduction {
height:100vh;
width: 100%;
background: url('../images/header.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
http://jsfiddle.net/teddyrised/6p3dk2yo/3/
Even better, is that you can also use max-height or min-height to control how big the element should be when it comes to smaller, mobile viewports through the #media conditional statement.
Your introduction div has a height: 100%; but it's 100% of nothing.
If you put some content in your div, like in this JS Fiddle then you'll be able to see the background image.
If you don't want any content in the div, then you should change height to a fixed pixel amount, like height: 500px;.
Your div technically has no content, so it is in fact 100% of 0px (content size). If you want to stick with the percentages and keep things responsive as you are, why not throw an actual image in that div containter? Check out this Jfiddle. -> http://jsfiddle.net/6p3dk2yo/
<body>
<section class="introduction"></section>
<section class="test"><img src='../images/header.jpg' alt='header' /></section>
<script src="javascript/smoothscroll.js"></script>
</body>
I have an image called myImage.jpg. This is my CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
For some reason, when I do this, the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page. So if I put a bunch of
<br>
in my html page, then the height will increase. If my HTML page consists only of a
<div id='header'>
<br>
</div>
then the height of the background image would just be the height of one
<br>
How do I make the height of my background image 100% of the screen which the user is using to view the webpage?
You need to set the height of html to 100%
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
http://jsfiddle.net/8XUjP/
I would recommend background-size: cover; if you don't want your background to lose its proportions: JS Fiddle
html {
background: url(image/path) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Source: http://css-tricks.com/perfect-full-page-background-image/
The VH unit can be used to fill the background of the viewport, aka the browser window.
(height:100vh;)
html{
height:100%;
}
.body {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}
html, body {
min-height: 100%;
}
Will do the trick.
By default, even html and body are only as big as the content they hold, but never more than the width/height of the windows. This can often lead to quite strange results.
You might also want to read http://css-tricks.com/perfect-full-page-background-image/
There are some great ways do achieve a very good and scalable full background image.
I have an image that is my header. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
It fills the full width of the page, but I had to specify a height for it show up. Here is the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 250px;
}
How do I make this image responsive? Right now when I expand the page it gets to the point where the pic is unrecognizable.
Didn't got your question quiet well, but I think you are missing a value here
background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
--^---
CSS
.wrapper {
background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Demo
As ralph.m suggested, if you are using this image as your website background, than use the background property on body element instead of div
You need to use following CSS to make the background responsive
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Reference Link
You need to think carefully about how you want/expect this to work. Without some actual content in the div, it will have zero height, which is why you needed to set a height on it; but in general, try to avoid setting heights. Presumably, if this is a "wrapper", it will be wrapping some content that will hold it open without you having to set a height.
As for the background image, you need to think about how it will behave. Do you just want it to appear in a strip along the top? If you use Mr Alien's solution, be aware that the image will stretch wider and wider and start to look odd. So we need some more information on what you are trying to do here.
I'm trying to position one div after another, easily achieved when the divs are positioned relatively, but I want each of these divs to fit the size of the browser.
I've very roughly achieved it using this method:
<div id="container">
<div id="test-1" style="background: url(../images/background-v2.jpg)"></div>
<div id="test-2" style="background: url(../images/background-v2.jpg)"></div>
</div>
CSS:
#test-1 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#test-2 {
position: absolute;
top: 101%;
left: 0px;
width: 100%;
height: 100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So #test-1 scales to fit the size of the browser then when you scale down #test-2 also fits the size of the browser and so on. But I've achieved these by positioning them absolutely and setting #test-2 101% from the top, which I don't want to do every time I add another div, thus the reason I'd like them positioned relatively while still retaining the scale to browser background images. If that is at all possible? Might it require jQuery?
I'm completely stumped on this one!
There was something else I couldn't figure out with these background images as well, as they're nested inside divs, when the browser size gets below about 750px in width, the background images become fixed, is there anyway they can always stay centre to the browser, basically overflowing the image off the left of the browser?
I haven't used background images as I'm not really sure what you're doing with them but here is a solution using jQuery for the sizing issue:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.fill-browser{
width:100%;
}
</style>
<!-- uncomment the line below to include jquery, I had to comment it out for stackoverflow -->
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script-->
<script>
$(function() {
Resize();
});
//Every resize of window
$(window).resize(function() {
Resize();
});
//Dynamically assign height
function Resize() {
// Handler for .ready() called.
var windowHeight = $(window).height() + 'px';
$('.fill-browser').css('height', windowHeight);
}
</script>
</head>
<body>
<div class="fill-browser" style="background-color:#aa0000;"></div>
<div class="fill-browser" style="background-color:#00aa00;"></div>
<div class="fill-browser" style="background-color:#0000aa;"></div>
</body>
</html>
You might also want to check out - http://srobbin.com/jquery-plugins/backstretch/
It's a jQuery plugin to easily stretch background images.