I have the following problem: I have a full screen image slider one my website which is responsive. The image size always adapts on the window size. My solution is as follows:
.picture {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
min-width: 100%;
}
<div class="owl-carousel slides">
<div class="slide">
<div class="picture" style="background-image: url('myURL')"></div>
</div>
</div>
The problem is that you can see the other content of the page at the sliders position when loading the page. The reason is that the picture container has no width when the page is loading. The width is calculated based on the image width. For a better understanding: I am loading the page, then for a short moment I can see the div content at the top and then the slider is loaded and the content is below the slider where it should be.
Does anyone have a solution?
Thanks in advance!
You could try the CSS3 Viewport Unit.
.picture {
width: 100vh;
height: 100vh;
}
Browser support is okay, except IE.
Related
I have a css background image that i displayed as cover so that it covers entire screen but it does not show lower part of the image.
used this image: https://pixabay.com/vectors/winter-landscape-houses-background-2840549/
unable to see the lower part of the white houses in the screen.
using chrome browser.
CSS Code:
banner{
width: 100%;
height: 100vh;
background-image: url(./images/winter.png);
background-size: cover;
background-repeat:
position: relative;
text-align: center;
background-attachment: fixed;
}
any help appreciated.
edit:
html code
<div class="banner" >
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
body{
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Try changing background-size: cover; to background-size: contain; and then background-size: 100% 100%; to fit 100% width.
body {
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
background-size: 100% 100%;
}
The problem you are having that the height of your image is bigger than the hight of the container (body element) at certain point depeding on the current viewport height, which causes your image to be cropped.
You can try the background-size: contain where the image will scale and try to fit the container keeping the aspect ratio undisturbed. Here you gurantee that your image will not be cropped, but you need to consider changing the image for each device screen size (responsive design image).
There are many ways to solve this issue, but you need to find the one that fits your design, or to find the image that fits your container.
Check this w3schools article about responsive design image
i've used search but i haven't found proper answer for my question. I have web-page with 4 divs and 4 different background images with them. Every div has width property set to 100% and fixed height of 790px. The problem is that background images doesn't rescale properly on big screens (1200 and more).
HTML:
<body>
<div id="screen1">
<div id="screen-1-wrapper"></div>
</div>
<div id="screen2">
<div id="screen-2-wrapper"></div>
</div>
<div id="screen3">
<div id="screen-3-wrapper"></div>
</div>
<div id="screen4">
<div id="screen-4-wrapper"></div>
</div>
</body>
css:
#screen1{
width:100%;
height: 790px;
background-image: url(example);
background-size: 100% 100%;
}
#screen-1-wrapper{
width: 960px;
}
/* difers only background-image */
I've tried background-size: cover and contain but it didn't work for me.
How can I solve that problem?
background-size: cover
would usually be my solution. Have you tried using it with the full vendor prefixes, e.g.
-moz-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
Failing that, setting:
background-width: 100%;
background-height: auto;
min-height: 790px;
would rescale the image responsively, but ensure it never dropped below the boundaries of the containing element.
try this in your css:
background-size: 100% 100%;
if you use that the background image should be equal to the size and position of the div it's tied to in any resolution
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'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;
}