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
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
Here's the original image (2880 x 900):
And here's how it appears on the rendered page (1280 x 500):
1280 x 500 is the dimension of the <div> that contains the image as its background. If you notice, the rendered background is getting cropped instead of shrinking to fit inside the div which is smaller than the original image. My understanding is that a background-size: cover is meant to scale the image up or down without cropping. Why is it not working?
HTML
<div class="page-header-div">
<div class="page-header-div-image-blog" style="background: url(<?php echo $bannerurl ?>) no-repeat;"></div>
<div class="downarrow text-center downarrow1" onclick="scrollPage(this);"><i class="fa fa-chevron-down"></i></div>
</div>
CSS
.page-header-div { position: relative; }
.page-header-div-image-blog {
background-size: cover;
height: 100%;
}
The exact same markup on another page works just fine! The two pages have the exact same tags used for the snippet. Is there no way to fix this issue through CSS? If so, how can one go about doing it using JS (I would really want to avoid that if at all possible).
You have to use background-size: contain; instead and also set background-repeat to no-repeat.
From MDN background-size docs:
cover: A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
Also note that, as #zgood pointed:
2880 x 900 is a different aspect ratio than your div at 1280 x 500, so event when you use contain you will have a gap
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
See also:
Scaling background images (MDN)
I was having this same problem. It turns out that I had my background-size declared before my background. See example:
DID NOT WORK:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(../img/background.jpg) center center no-repeat;
WORKS:
background: url(../img/background.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div></div>
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.
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.