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
Related
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);
}
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.
I have this image and I want to make it white by default and cyan by hover. Is there another way than to make 2 images, one white and one cyan?
You can make a PNG where the magnifying glass is transparent, then set the background color on the img tag in CSS:
img {
background: steelblue;
}
img:hover {
background: skyblue;
}
Demo: http://jsbin.com/jeqihuxo/2/edit
Another way is to use sprites. Well, technically would not be two seperate images but one image which background-position is changed on hover. Your image is 36x48, so make a new image 72x48 with the non-hover version on the left side and the hover version on the right and move the background on hover.
Lets say I have an image with the width and height of 1700 x 1129px. What is the best way to be able to repeat this image so that you cannot tell that it has been repeated. I have tried using repeat-y but it looks like its another graphic.
There is nothing to do with css. Your image does not allow repeating. To repeat an image without bad effects your image has to have same start and end in the direction you want it to repeat.
There's a quite simple trick: end your image sides in a static color (like black or dark brown in your example), center your background image and color fill your background
body { background: black url(image.png) no-repeat center top; }
Use background-size property.
If you have a background which you think can be disguised by repeating horizontally then do the following.
background-size: 50% 100%; background-repeat: repeat-x;
if you think the background can be disguised by repeating vertically then do the following:
background-size: 100% 50%; background-repeat: repeat-y;
You will have to make a seamless image, that means that the upper and lower edges as well as the left and right edges of the image match their opposite edge perfectly, so no angles and color transitions being visible. The css approach using background-repeat is totally fine.
That's often used in CG, mostly in the 3D world.
There's plenty of tutorials around on making an image seamless, found one here.
I have some divs, and they have their backgrounds set as images using this:
background:url(myimage.jpg);
Now what I'm looking to do is set a border on that image that is set to the background.
I don't want to set a border on the div as this does not give the desired result, it must be a border on the image.
Not sure if this is possible, is it?
You could try using multiple backgrounds, by setting your base bg image and a second one as a border.
#container {
background-image: url(Main-bg), url(Border-img.png);
background-position: center center, left bottom; /* border bottom in this case */
background-repeat: no-repeat;
}
It is not possible to do it precisely as you've mentioned. Since the background image is styling, rather than content, no additional styling can be added to it.
The best option would be to create a different image file to serve the bolder border.