Is it possible to set a max height value to a background image that uses background-attachment: fixed ?
I want to use background-size:cover to cover entire div but instead the image covers the whole viewport instead of just div when its fixed. I thought I could set a max height value to the background image but not sure if this is possible?
See fiddle:
https://jsfiddle.net/wcn0wrm3/1/
Unfortunately, you cannot do that. This is how background-attachment: fixed works - it sets your background-image to cover the whole viewport. background-size:cover in this case is totally useless. What do you want to achive with this styling?
Related
I am using fixed background images in my ReactJS website. The image I am using in header area is getting weirdly stretched (zoomed-in, only a small part of picture is visible) even though the same CSS properties for different elements work well.
App.js
return (
<div id="main">
<div id="header">
...
</div>
...
<div id="bg-img1" className="background_image">
...
App.css
#header {
background-image: url("img/svatba.jpg");
background-position: center center;
background-size: cover;
background-attachment: fixed;
height: 300px;
background-repeat: no-repeat;
}
...
.background_image {
background-size: cover;
background-position: center;
text-align:center;
min-height: 326px;
background-repeat: no-repeat;
}
#bg-img1 {
background: url('img/svatba2.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
...
Now the image in the "header" element shows up zoomed, not covering the viewport as it should. The image in the "bg-img1" element is displayed properly.
What am I missing?
When you set the background-size to "cover", you are telling it to take that image and resize it (or "zoom it in" as you're saying) so that it covers the entire section (here #header).
If your hope is to have a header 300px high that spans the whole width of the page without losing any portions of your image, You would need to serve an image that shares the same proportions as your header.
For example, if your header is 300 x 1000, you could load an image of the same dimensions or of 120 x 400, keeping an aspect ratio of 3:10.
background-attachment
The way that background-attachment: fixed is commonly used is as a way to prevent a background image from moving relative to the viewport whenever the document is scrolled.
Note: For the purposes of this explanation, the viewport can be thought of as being equivalent to the browser window, although this isn't strictly the case.
CSS does this by basically taking the element's background image and attaching it to the viewport instead of to the element itself.
Since the viewport doesn't change its position when the user scrolls, the image will be statically positioned relative to the window. So far, so good.
background-size
Where we get into trouble with attachment is when we try to combine it with background-size: cover (or contain). Because background-attachment has already sent the background image to the viewport, any background position changes made through the CSS become relative to the viewport.
This is normally fine, but it means that when you try to use either a percentage value or a predefined size operator like cover, the background will also be sized to the viewport.
While writing up this summary, I discovered that this behavior is mentioned in the MDN documentation. The only problem is that it's just two sentences jammed in the middle of the percentage paragraph in the Values section of the background-size page. Yikes.
Demo
I've created an interactive demo to show the results of this behavior. To view it, click here.
The demo will display four panels, each with a different combination of sizing and attachment. Move your mouse over each of these panels to see how the background image is positioned in the container, and what's been hidden.
Fun fact: I made over 300 revisions to this demo before I was comfortable calling it done :P
Conclusion
In one of your comments below, you said (emphasis mine):
Cover was the culprit - but I have a little idea why. All the images
are landscape. The elements have min-height. I expected that the cover
will fix the width to the viewport, and that contain would fix the
height to the element height. Instead I see the cover zooming absurdly
(not matching any of the dimensions) and contain matches the width
(which is what I wanted). But why?
CSS often subverts expectations, and this is no different. For the cases below, assume we're using background-repeat: no-repeat.
cover scales the background image so it fits the element's largest dimension exactly and overflows the smaller one. This will generally cause it to be much larger than the element, showing only a portion of the image.
contain sizes the background image so it fits the element's smallest dimension and leaves blank space on either side of the image in the larger dimension.
But when you use background-attachment: fixed...
When you use cover, what you're actually seeing is the image being scaled to match the height of the viewport, since the height is smaller. With a landscape image, the height of the image will be scaled to the height of the viewport, which is why it appears so large.
When you use contain, the image is scaled to match the width of the viewport. If your element takes up the full width of the viewport, this will cover the element, cutting off the image's height, if necessary.
If you want to size the image using element-relative cover or contain, your two options, essentially, are to remove background-attachment: fixed, or to resize the source image so that your background-size declaration isn't necessary. Unfortunately, no CSS solution currently exists to enable attachment and keyword-based sizing at the same time.
I'm using a big image as background. However, it always resize automatically(Can't display full height of the img), How to deal with it?
One way is to set its height to the image's height. But when I'm reuse the class for other images, I have to change the height many times.
#HTML
div.img-bg
div.content
#CSS
.img-bg
background-image: .....
DEMO
Try background-size: auto; (the default value)
If you do not resize the background-image and use it's full size, your div.content should be as big as the image height.
So, as far as i understood, you set width to .content, now you can try to set height or min-height to fit the background-image's height.
Without height setted, I guess you have something like on the pic.
UPDATED DEMO
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.
I have a vertical menu using lists (li) and I've got it changing background color on hover.
#limenu:hover {background-color:#000}
However, I don't want the background to fill 100% width. Is there a way of setting the background width or creating a padding on both sides?
There will be a background-size property that does exactly what you want in CSS3. But, it will be a few years until this is so widely implemented that you can develop for it safely.
Until then, bytenik's suggestion (or resizing the background image server-side) is the best that can be done.
There's no way of setting background width. However, you can simulate this effect in this case by setting a padding and then using overflow to allow your content to overflow the box. The background will still be constrained by the box even if the content is not.
There's a background-size.
i.e.
background-size: cover;
I have a an image not covering the background completely of a div.
Can I specify the height of the image to make it larger?
transparent url(http://www.example.com/picture.jpg) height=??
You can not stretch a background image. Well at least you can not reliably do it cross browser today. The future CSS is most likely to support it, IIRC.
You will need to use a <img> element if you want to use the browser to stretch an image, but this is not recommended.
If you are not wanting to stretch the image, but more some of the background image is cut off, then expand the height of the element that has the background with the css property width or height.
Background images can't be stretched.
Use an img tag with absolute positioning and z-index it behind your other elements.
You should only specify the height of the div. And use
repeat
property of background.
If you need to stretch use an image inside the div and make height and width to 100%.
if the background is just a solid color, you can use repeat-y.
CSS3 does this with http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. Sadly no browsers support that yet. You have to do a img.
See http://webdesign.about.com/od/css3/f/blfaqbgsize.htm and http://www.kyrnin.com/about/blfakebgstretchexample.htm