according to the window size, the picture should both cover the window and even if the window height is greater than the height of the picture, let the picture be centered and fully covered.
But I don't want like this (Because the image is not centered, it just starts from the corner.):
background-size: center cover;
Your attempt looks like you try to do it with a OneLiner.
body {
background: url(https://via.placeholder.com/500/green) transparent no-repeat center center / cover;
height: 100vh;
}
<body>
<div>
hello World
</div>
</body>
background-size sets the size of background images for the element. The size of the image can be constrained, completely or partially in order to maintain its aspect ratio.
then remove the margin and padding from the element's parent
try to separate each term, like this
background-size: cover;
background-position: center;
try using margins
I have defined a css for you
.image{
width: 40%;
height: 40vh;
margin-top:30vh;
margin-left: 30%;
}
u can change the width and height of image but remember change margin top and margin left by half.
I used this for a div with an image inside of it. should work just fine. it will get smaller/larger depending on the window size and it will be in the exact center of the page.
background-image: url(path/to/image);
background-size: cover;
background-position: center center;
Hi i have a problem with my wordpress site - i used this css to change the background of page :
.page-id-689 #primary {
background: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg') no-repeat center center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
min-height:100% !Important;
}
the problem is that the background wont show on the whole page ( Screenshot).
I already tried :
.page-id-287 #page_wrapper { height:100% !important; margin: 0px auto; }
html, body { height: 100% }
i also tried setting min-height to 100 % - wont work
!!! the problem is solved when i set the height to 1200px in #primary but it also causes huge problems in lower resolutions. Can someone help me with this ?
You should set height of all container elements to 100% down to html element http://prntscr.com/8o41id
background-size: cover; covers the size of the container. Looking at your site the #primary id is only going to be as large as the content within it. If you want it to have the same height as the image so it covers the entire page you need to set an actual height value. Try adding height: 802px; and it will fix it, as that's the height of the image.
If you want a more graceful solution add this to the body:
body {
background: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg') no-repeat center center fixed;
}
And remove the background-color from .st-content.
If you want multiple pages to have different backgrounds you'll need to create a separate wrapper with a unique ID that runs the entire width and height of the page regardless of the content on it.
More information on background-size can be found here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
I am trying to create a full width parallax site and having an issue getting background images for sections to scale properly.
How would I get a full width image in desktop view to shrink down and contain a 100% width but the height shrink and image contain proportions to fit the width? The problem I am having is I can't set a background container to have a max height.
I'm really looking for a way for the height to shrink from 100% down when the viewport keeps getting smaller so that the focus of the picture isn't lost and maintains proportions just like a responsive image would.
I have tried background-size: contain as well but even then the container has to a have a fixed height which has to change while the background image shrinks because otherwise the image won't be fluid with the container.
#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}
If I remove the height obviously nothing is rendered in the browser and max-height doesn't work like it would for responsive images.
Can someone please help me with this effect?
You need to use background-size: contain instead of background-size: cover. Demo here
#main-photo {
background-image: url('images/main.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}
I found a solution using a padding trick that adds height and allows the image to maintain its aspect ratio. Thank You!
Just add
padding-bottom: %here
You won't need to specify a height for the background image only a 100% width.
Here is a great article. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
I have a list of figures containing background images. Something like the following:
<ul>
<li>
<figure style="background-image: url(...);"></figure>
</li>
<li>
<figure style="background-image: url(...);"></figure>
</li>
<li>
<figure style="background-image: url(...);"></figure>
</li>
</ul>
Each of these images has their background-size set to cover and background-attachment set to fixed.
figure {
width: 100%;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
When each of the figures takes up the entire viewport, this works fine, but if there is an offset of any kind the background-image gets clipped.
As far as I can tell this is by design (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).
I would like the images to either clip vertically or horizontally but not both, and be centred by the size of the figure itself.
I know there are javascript solutions but is there a way to do this using CSS?
Here is a working example: http://codepen.io/Godwin/pen/KepiJ
Unfortunately this is simply an artifact of how fixed positioning works in CSS and there is no way around it in pure CSS - you have to use Javascript.
The reason this happens is due to the combination of background-attachment: fixed and background-size: cover. When you specify background-attachment: fixed it essentially causes the background-image to behave as if it were a position: fixed image, meaning that it's taken out of the page flow and positioning context and becomes relative to the viewport rather than the element it's the background image of.
So whenever you use these properties together, the cover value is being calculated relative to the size of the viewport irrespective of the size of the element itself, which is why it works as expected when the element is the same size as the viewport but is cropped in unexpected ways when the element is smaller than the viewport.
To get around this you basically need to use background-attachment: scroll and bind an event listener to the scroll event in JS that manually updates the background-position relative to how far the window has been scrolled in order to simulate fixed positioning but still calculate background-size: cover relative to the container element rather than the viewport.
There's a jQuery fix for this: http://jsfiddle.net/QN9cH/1/
I know it's not optimal but at least it works :)
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
Nick Noordijk's answer put me on the right track, but I like to avoid scripts that perform a calculation every time the scroll event happens. Here's my version that only performs the calculation when page loads or screen size changes:
html:
<div class="fake-img"></div>
css:
.fake-img {
display: block;
height: 280px; /* set the height here */
width: 100%;
background-image: url('http://example.com/path/to/image.jpg');
background-repeat: no-repeat;
background-position: center 68px;
background-size: auto 50%; /* make a "best guess" here as a default */
background-attachment: fixed;
position: relative;
}
jQuery:
$(window).on('resize load orientationchange', function(){
responsive_calc();
});
var responsive_calc = function(){
// get the viewport height
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// get the element height
var bannerHeight = $('.fake-img').height();
// get the integer percentage value difference between them
var bgHeightPercent = Math.ceil(bannerHeight/h*100);
// set background-size height to match the element instead of the viewport
$('.fake-img').css('background-size', 'auto ' + bgHeightPercent + '%');
}
Note that this really only works with landscape "banner" images - using background-size: auto nn% doesn't have the same advantage of background-size: cover in working no matter if your image has excess in either direction.
background: url(<image>) center top no-repeat fixed;
background-size: auto <width size in %>;
There is no real solution. However, you could make size height of the image auto instead of cover. And adjust the width size in % in your element until it bites the border.
You see if you resize your window, it won't be clipped. Instead, it will always keep the original image size format. With this above you basically 'zoom' it but doesn't 'cover' it up.
The background-size: cover; property is indeed clipping the image in order for it to fill the area and not have any empty space.
The background-size: contain; property is determining which dimension is larger and scales according to that. So if you have a 100px x 100px block and a background image of 200x150px, setting the background-size to contain will scale the image to 100x75px. In this scenario however, you will have empty space if the element's aspect ratio is different than the image's.
You can also manually control which proportion has priority, assuming you know the image's aspect ratio.
So if you know that your image is always 100x200px, this means that the width is always the small dimension and the height the large one.
Now setting the background-size: 100% auto; will ensure that you will not get empty space but you will end up with clipping. If you set it to background-size: auto 100%; it will ensure that no clipping takes place and the height will never have empty space ( but the width will).
If you do want clipping and just center the image, use background-position: 50%;.
Another very simple solution is to use of the vw and vh units (which, in case you didn't know, has totally passable browser support for most cases). For example, instead of doing background-size: cover, do background-size: auto 100vh.
If you're not familiar with vw and vh, they're viewport units, and they correspond to viewport width and viewport height. The values correspond to a percentage of the viewport height or width. For example, 50vw means 50% of the viewport width.
For our purposes, we can simply tell the background to be 100% of the viewport height.
Here's a fiddle.
If you need to accommodate for different aspect ratios you can take advantage of the aspect-ratio #media rules.
An example of parallax effect for separately arranged elements (not for fullscreen elements):
html:
<div style="background-image: url('/path/to/image.jpg')">Content</div>
css:
#element_to_scroll {
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: 0;
}
js:
$(window).scroll(function() {
var realImageWidth = 1280;
var realImageHeight = 1024;
var viewportBottom = $(window).scrollTop() + $(window).height();
$('#element_to_scroll').each(function(){
var scrollAmountPx = realImageHeight/(realImageWidth/$(this).outerWidth())-$(this).outerHeight();
var elementOffsetFromBottom = viewportBottom-$(this).offset().top;
var scrollAreaHeight = $(this).outerHeight() + $(window).height();
if(elementOffsetFromBottom>0 && elementOffsetFromBottom<scrollAreaHeight) {
var backgroundPositionOffset = Math.ceil(scrollAmountPx/scrollAreaHeight*elementOffsetFromBottom);
//$(this).css('background-position-y',"-"+backgroundPositionOffset+"px");
$(this).clearQueue().animate({'background-position-y':"-"+backgroundPositionOffset+"px"},50);
}
});
});
Update in July 2018: There is now a 1-line fix for this problem
I had this same problem until I read this article, which taught me that I could add this line to my CSS to make it work:
will-change: transform;
It worked!
Now my CSS looks like this:
.myClass{
position: relative;
background: hsla(300, 100%, 90%, 0.1);
overflow: hidden;
&::before {
background-image: url(/img/bg.jpg);
background-size: cover;
background-size: cover !important;
-webkit-background-size: cover !important;
background-repeat: repeat repeat !important;
background-attachment: scroll !important;//"fixed" is the desired effect, but mobile browsers find it too "expensive" and disabled it, so use "scroll"
background-position: 30% 50%;
#media(min-width: $screen-sm-min){
background-attachment: fixed !important;
background-position: 30% 20%;
will-change: transform;
}//768
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
}
}
It's working for me on Windows Chrome, Edge, and Safari. But not Firefox.
I did a version with Responsive background image.
.flexslider .slides > li {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#slider,
.alink {
min-height: 300px
}
.alink {
display: block
}
http://jsfiddle.net/onigetoc/grpku1gk/
I want to stretch the background image to match the size of the screen
body {
margin-left: auto !important;
margin-right: auto !important;
width: 80%;
background-image: url(hola.jpg);
}
I try to put background-size: 1500px 1500px; and is fixed.
How I can do it and automatic for all pages resolutions?
background-size:cover;
background-position:50% 50%;
Not compatible with IE8 and lower, yours to decide whether you need to support those now that IE11 is already out.
Use this, it should even work if your <body> does not cover the whole window:
background-attachment: fixed;
background-size: 100%;
(Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. [...] If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. [...]