I have an div element in the web page and I'm going to set both background color and background image for it. The image has a transparent background, and I want the background color to be shown under the image. Is it possible?
Yeah you only need to have an image with a transparent background and after that you use this
body {background:#ffffff url('img_tree.png') no-repeat right top;}
the #ffffff is the color that you want behind your image.
Very important that your image extension support transparency, use .png or .gif
Related
A slider plugin on a Wordpress website produces:
background: rgba(255,255,255,0.5) url(../images/black_icon.png) no-repeat center center;
Is it possible to change to color of the background image, using only CSS?
If I change the background-color it are not the strokes in the image that change color, but instead the background colour of the background image. Instead, I would like the line strokes of the image to change color (using only CSS). Is this possible?
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 an PNG image with a transparent area. It is a bit like a torn of checkout receipt with a zig-zag edge. It will sit at the bottom of a div with a white background to simulate a till receipt. I have tried this as follows.
background: #ffffff url("../images/zigzag.png") bottom right no-repeat;
But the background white fills right to the edge of the image
Aside from creating another div is there a way to stop the background colour going under the image?
Adding another div is probably the cleanest solution.
However, if the height of your div is limited, you can instead make the background of the div transparent and extend the top of the "ragged-edge" image with white pixels until it's tall enough that it always provides a white background to the main part of the div.
make background-color transparent:
#foo {
background: transparent url(yourzig-zagImage) no-repeat 0 0;
}
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