Why is background-size:cover different if background-attachment: scroll or background-attachment: fixed used?
Example:
http://jsfiddle.net/enriqg9/Yn43U/
The difference isn't really in background-size: cover. The difference between background-attachment: scroll and background-attachment: fixed is that
"...scroll means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)
"...fixed means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element."
as MDN says. So you'll see in your fiddle that the background-attachment: fixed background doesn't remain in its containing element <div id="two"> border. It is, instead taking on the fixed point of absolute positioning 0, 0 in the entire body's background.
In essence, background-attachment: fixed is overwriting background-size: cover and not allowing the latter style to take effect.
When you assign background-size:cover to a background-attachment: fixed item its container will be the actual view port the item is sitting in. In your case the cat image is stretched to fit the total width of the fiddle result box. The reason why it is this way might be because since it applies position absolutely to the viewport it also gathers the size required from the viewport.
Related
My HTML contains several 100% width divs, which have background-image rules applied to them.
Each surrounding canvas div is position relative, while the background-image divs are position absolute.
There is a background-size: cover; applied to each background-image div, but this does not work for some reason.
Please check this page for example:
https://mitteiler-os.de/
The first two "slider" sections with background images applied show white bars to the left and right. These two sections have 1980x1000 px images applied to the background-image CSS, while the rest of the sliders further down have wider images applied to them.
Somehow I do not understand why background-size: cover is not working right here.
Any ideas?
I believe that it does work for me. !?
can't see any white bars on the left or the right.
One Side note, the page doesn't really adapt nice to smaller screens (mobile)
The div in which I have a background image is of unknown size. It can be 16px high, it can be 1600px, and anything in between. There's a background-image in there that's roughly 440px wide and 250px high.
When the div is higher than 250px, the background image doesn't scale. That's desired behaviour. So far so good.
If the div gets under 250px in height, the background-image is clipped. That's unwanted: I want it to scale to the div's smaller height.
How do I use css (or, if not possible, js) to have a background-image scale down when it doesn't fit its div, but never scale up when the div is bigger than itself? Essentially, I want to use background-size: contain;, but with a max set to the image's height.
I tried all kinds of cover and contains, but none have the desired effect.
This question does not help either, for I cannot set a max-height on the div. It contains content added by the site's editor. If that's a lot, all of it must show.
Here's a fiddle: http://jsfiddle.net/Bakabaka/2zetkrg0/
Is simply inserting an img inside the element you wanted to give a background to an option?
You can use max-width:100%; max-height:100%; on the image, so it will not exceed the container dimensions, but will still retain its aspect ratio and won't grow larger than its original size. Next, you could position the image absolutely and give it z-index:-1 so it'll be behind all the content and won't be affected by it. Finally, just give the image top:50%; left:50%; transform:translate(50%,50%); if you want it centered within its container.
Here's a demo: https://jsfiddle.net/ilpo/9dnqd6bc/1/
You could even set min-width and min-height, if you wanted to have a minimum size for the background.
Try this, hope it'll work :)
container{
background-image: url("/assets/pic.jpg");
background-size: cover;
background-repeat: no-repeat;
max-height:250px;
}
When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%;, the both look the same.
What is the difference?
When should i use cover and when 100%?
cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.
If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.
Your Question: Why would they looks the same ?
Answer: If the image / container are square
See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example
here's a fiddle: http://jsfiddle.net/RS5kX/19/
background-size:100%; = background-size:100% auto; = the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio.
background-size:cover; means the background image will always fit the whole div , you won't be left with any empty spots in your div
background-size:100% 100%
won't leave any empty space too, but of course this will detroy the original image aspect ratio
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.
I am trying to add a div to my html with a box image in it. But I couldnt make the image to stretch to the div's size
here is what I have so far,
<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px">
test
</div>
this displays a div with width 600px and height 400px but it displays half of the image. but I need to make the image to stretch.
thanks
use background-size: cover; or background-size: contain (choose the right property for your needs)
From MDN
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
If you want the image to stretch, losing it's original aspect ratio, add background-size: 100% 100%;.
On the other hand, if you want the image to take up the entire div while maintaining image aspect ratio and some clipping is okay, use background-size: cover
background:#777777 none repeat scroll 0 0;
the 5 attributes it includes are background-color,background-image,background-repeat,background-attachment and background-position.
But I don't understand what background-attachment and background-position mean?
Can someone give an explanation?
EDIT:are background-repeat,background-attachment and background-position useless if background-image is none?
If you've ever seen a web page where the text on the page scrolls with the scrollbar, but the background remains stationary, that's
background-attachment: fixed;
Background-position defines how you position the image inside of the background of the element. For instance, if you have a small drop shadow image that should only repeat along the bottom edge of your element, you could use:
background-repeat: repeat-x;
background-position: bottom left;
Or if you had an image you only wanted displayed in the bottom, right hand corner of your element:
background-position: bottom right;
background-position also accepts pixel values in the format:
background-position: xpos ypos
for finer grain control.
background-attachment
background-position
W3Schools has a pretty good explanation of these elements:
background-attachment: determines whether the background is fixed or scrolls with the page.
background-position: determines the position of the background in relation to the page (values like top center, bottom right, pixel values, etc.)
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
scroll
The background image scrolls with the rest of the page. This is default
fixed
The background image is fixed
inherit
Specifies that the setting of the background-attachment property should be inherited from the parent element
The background-position property sets the starting position of a background image.
Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".
The background attachment specifies if the background scrolls along with the webpage.
background-attachment: fixed; would fix the background so even if a user scrolls down the webpage for example, the background wouldn't move.
background-attachment: scroll; would make the background scroll with the page.
More info here: http://www.w3schools.com/Css/pr_background-attachment.asp
The background position takes 2 arguments; the x position and the y position. It specifies where the original background image will start to be displayed. The origin is on the top-left of the container.
More info here: http://www.w3schools.com/css/pr_background-position.asp
From W3 background-attachment
The background-attachment property
sets whether a background image is
fixed or scrolls with the rest of the
page.
Lets say you have a background picture, like here (look at the pretty mountains.)
When the background-attachment property is set to "fixed", then when you scroll the page, the background remains, uh, fixed. The contents of the page scroll, but the background picture does not.
Compare to this page. See the background doodling on the sides? When you scroll down, then those drawings also scroll with the page. This is an example of the "scroll" choice - which is what you have in the CSS snippet you posted.
background-position: is used to define the anchor point of the image on the screen like top left or bottom right
background-attachment defines whether the background image will scroll with the contents