How to fade a background image to transparent, in a gradient fashion? - css

I have a background-image on my body, set to repeat so it covers the entire page like an infinite background, no matter the length of the page.
I'd like to have this fade out to show the default background (plain white) about half way down the window when first loading up a page, so it's more like a banner background.
I've found previous questions like this one: Fade image to transparent like a gradient detailing how to fade an img element which is located behind other content.
But I am specifically asking how to fade a background-image applied with CSS, not an img element. Is this possible?
Here's an example of the effect I desire (done by editing the image directly in image manipulation software): https://travamigos.com/about-us/

This is not possible with CSS as it stands as background images cannot be affected by opacity.
However, you could overlay the bg-image background with a background gradient with opacity but it would have to end in a definite color, in your case white.
body {
min-height: 100vh;
background-image: linear-gradient(transparent, white 75%), url(http://www.fillmurray.com/460/300);
}

Related

How to include PNG image with transparent background with CSS

When I am using CSS3 to include a PNG file with a transparent background it the background is autometically being converted to white. How do I keep it transparent?
CSS does not manipulate PNG files in any way as you're making it sound. Without seeing your code, we can only assume that the white background you describe is the background color of the element the image is placed in.
If the image itself is being used as the background, use this code:
element {
background: transparent url(image.png) no-repeat center;
}
If the image is not being used as a background and is merely an image element placed within a div, then the background color of the parent div should be set to transparent.

Transition from background color to background image with CSS3

With CSS3, is it possible to fade from a background-color to a background-image?
I know it's possible to fade from color to color or from image to image, but can you also fade from the one to the other?
It's not possible from native view, but you can simulate it: jsFiddle
body {
background-image: url('http://s1.directupload.net/images/140212/gvyaj9ca.png');
}
This picture is a PNG with nothing inside (not even white color) and the same size as:
body:hover {
background-image: url('http://connexo.de/img/logos/CSS3_Logo.png');
}
I don't exactly know what behavior of the background color you want to achieve.
I just revert it to white.

Flip background image on repeat-y in CSS

I have a gradient image as the background to my website and I am having problems making it look correct with all page sizes. The image is 291x1080 and I am having it do a repeat-x. This is fine with all pages that are no larger than 1080p. However, for a page with more content or a screen with a resolution larger than 1080p, a white space follows the background. I do not want to do a simple repeat-y because the gradient going from light to dark without a transition would be strange. Is there any way to flip the background image every time it does a repeat-y using CSS?
This is the css to do this:
body {
...
background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
...
}
My suggestion: have the fabric texture and a gradient, not in an image.
For example:
body{
background-image: url("/static/img/background.png") repeat, linear-gradient(top, #000000, #123456);
}
You should make sure you add the browser support tags (-webkit, etc)
For further reference check out this:
How do I combine a background-image and CSS3 gradient on the same element?

z-index not working with css3 background gradient

I have a background gradient on a div (only code for FF shown below for readability)
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
I then have an image inside this that needs to "break out" the bottom over a second div below that has the same gradient. I am using z-index 2 on the image, z-index 1 on the div.
This works fine when the divs have no gradient (just a solid background colour), but as soon as I apply the gradient the z-index fails and the image drops behind the second div, see images below:
With gradient background
With solid background
The issue was the z-index on the containing div, even though it was set lower than the image, removing it fixed the problem :/
I'm going to guess that the elements with the z-indexes don't have a position property. Then z-index won't work. It may seem to work with no gradient, but that is because the background-color of the div is transparent an the image is visible underneath it, giving the impression of being on top.
Am I right?

How to change the tint of background image using CSS3?

Is it possible to change the color or tint of background image on hover/focus using pure css
See example here http://jsfiddle.net/jitendravyas/HdDRA/
In above example there is a white arrow on an image. I want to change the color of white arrow ( not the other background image) to something else on hover and focus.
I cannot use inline images in my case.
Edit:
I'm looking almost same like this http://jsbin.com/icemiy but for background images.
And I also want to change the color with fade-out so I can't do with multiple images
A quick and dirty fix would be to duplicate the arrow image in the color you want it to be onHover. Then replace the background image with this in the code.
body
{
background:
url(http://www.kapellohair.com/images/white-arrow.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
body:hover
{
background:
url(http://www.example.com/images/arrow-with-desired-color.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
p.s: The link does not exist. It is only for illustration purposes
Just thinking off the top of my head here.
I suppose you could put a transparent coloured div over the top of the image with an opacity of 0, then have its opacity go up to say 10% on hover. You'd be somewhat limited on what you could do though, it would look weird if you did it to an image with an irregular outline, for example, and you'd only have limited control over the tinting (I think it would pretty much be the equivalent of a semi-opaque layer in Photoshop so you couldn't do anything that you would require other tricks such as multiply or screen to achieve).
No, you can't do what you want, you can change the background using another different image.
An alternative could be to use a font to render the arrow and then to change its color (which is also animatable).
Alternatively, you can rely on Javascript to do some color manipulations on the image. See this answer

Resources