I have a div where I'm changing the background (using jQuery). These CSS3 rules allow the new background image to crossfade in nicely
transition: background-image 1s ease-in-out;
background: center center no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
The issue is that the background size is also transitioning.
So if it switches from a portrait to a landscape background image, for example, while fading, the image gets squished vertically and then stretched horizontally. This can be a bit nauseating.
Is there any way to use background-size: cover but to only fade transition the background image itself without the background size?
I worked around the unintended size animation by:
having two divs, absolutely positioned on top of each other
cycling their opacity (eg one to 0, and the other to 1)
putting the css transition on the opacity, rather than background-image.
This achieves a cross-fade between the background images of the divs. If you have more than 2 images to cycle, either use more divs, or change the background-image of the one you are setting the opacity to 1.
That's just... weird. background-image isn't supposed to be animatable in the first place. On the other hand, background-size can be animated, but it's very clear from your CSS that you don't want to transition background-size. Yet, your browser chooses to animate it along with the image anyway.
Whatever your browser is doing, it's obviously ignoring the spec and just doing its own thing. Since background-image isn't animatable using CSS (I know Firefox and IE don't support it), and your background transition is already being handled with jQuery anyway, I suggest using jQuery instead of CSS to implement the crossfade to ensure it'll work consistently across browsers.
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)
My slider background shows up in Chrome, Firefox, and most versions of IE, but not in IE8. Its background stays the same color as the rest of the page.
.site-slider {
width: 100%;
background: url(images/alexandria/header_overlay.png) no-repeat center top,
url(images/alexandria/header_bg.jpg);
}
If I change background to background-image, every browser shows the same thing that IE8 does.
IE doesn’t support multiple backgrounds until version 9. You can get around this by adding a wrapper element and applying one background to the parent and one to the child.
.site-slider-wrapper {
background-image: url(images/alexandria/header_bg.jpg);
}
.site-slider {
background: url(images/alexandria/header_overlay.png) no-repeat center top;
}
The reason changing the property name to background-image breaks the CSS in every browser is that the first background sets background-repeat and background-position properties (no-repeat center top) as well, which aren’t valid as part of background-image.
(The whole point of background is to be a shorthand for the background-* properties.)
You're using a CSS3 "Multiple Backgrounds" feature, which isn't supported in IE8. See its support on this link
Please read this tutorial and find the heading where it says "Multiple Backgrounds". Here you'll find a way to make this property work on IE8 as well.
Secondly, background is a shorthand property where you can combine/define values for the following properties:
background-color
background-image
background-repeat
background-attachment
background-position
Eg: background: #00ff00 url("smiley.gif") no-repeat fixed center;
On the other hand, if you use any property from the list above, it will accept only values specific to them. They won't work if you'll try to combine any other property value with them. Because of the same reason, your background-image property isn't working. You can only define the urlof the image as a value of background-image
Eg: background-image: url("paper.gif");
Adding this line
src /*\**/: url('skins/fonts/titillium/TitilliumText22L003-webfont')\9
seemed to fix it...
I have been using css for a few years but have never ventured past using fixed width layouts. I'm looking at using a fluid layout for my next site, or as much percentage as I can, but I have a question that worries me.
If I have an image with 1900px width set as a background, I understand that it simply shrinks when the browser calls for say 1600px.
What happens when the resolution calls for a 2000px width? I will be left with white space, correct? How can one avoid this? I feel like I should probably just throw out that its not an image that can be repeated horizontally.
A trick usually used is to have the image be "inner-glowed" with a color, then set the background color the same as well.
Suppose your image doesn't tile, and has black "inner-glow" or "feather" effect, then you can make the container's background color as such:
background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;
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