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)
Related
In some cases, when one of the parent elements in HTML is having margin of padding defined at the bottom or at the top, it will happen that your video object can't stretch the source media to the fullest within itself. Even if you define the object-fit:cover you will still have the small gap at the top or the bottom of the video tag. This is happening only in Google Chrome as far as I know.
In my case, setting display: block; on video element solved the issue.
The only thing that helped me solve this issue is to set the object-position: top or object-position: bottom; on the video tag. It depends where the gap is.
I've got a Bootstrap page where some rows have background images. Is there a way (preferably css) to scale such a background image, so that it's always centered and fills the div 100%?
So I don't mean a fullscreen background image for the entire page (like this), it just needs to fill the div (typically a row in my bootstrap container).
I mean like so:
So no matter the display resolution and the actual screen size of the div, its background image should scale accordingly so it entirely fills the div. The image should not be stretched out of proportions, which means that part of the image will typically fall outside the div, either up/down or left/right (unless the div just so happens to have the exact same aspect ratio as the image).
Also the image should be centered, i.e. the middle of the background image should be in the middle of the div.
I've tried all sorts of things with background-size:100% auto or auto 100% which seems to work OK in one direction, but I can't seem to find a generic solution that works in all cases.
sure, you could apply the same idea to any element:
yourdiv {
background: url(images/bg.jpg) no-repeat center center fixed;
/* and one of these: */
background-size:contain;
background-size:cover;
}
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.
I would like to fix my background to 100% height of body and leave it there even when rest of the page scrolls.
How do I achieve this?
Right now all I have is background:url(bg.png);. The height of the image is 1200px and width 20px, if that matters.
in css, use this:
background-attachment: fixed;
Depending on what you want the background image to do there are a couple of options. There is a great article on ALA about full screen BG images that accounts for scaling:
http://www.alistapart.com/articles/supersize-that-background-please/
If you are just looking to position the image in the browser you would do:
background:url(bg.png) no-repeat top left;
background-attachment:fixed;
Or however you want to position it respectively (top right, etc.)
Some browsers still have trouble supporting the stretching of background images so here's a workaround.
CSS3 Example and Support
Since it's already 1200px, you can use background-attachment:fixed; on the background to make it follow when they scroll. Example at w3schools. You can make the image look like it is meant to flow into a solid color at the bottom with a nice gradient, etc.
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