I have an image inside a div. For example's sake, let's say this div has a background-color of #000. Now, I want this image to fade from the left, to the right.
What I mean is, the first column of pixels should appear to have 100% opacity, whilst the final column of pixels should appear to have 0/1% opacity (the final column of pixels will blend in with the background of the div).
How would I do this purely in CSS? The image will always be 50x50.
you could overlay div on top of an image
and set gradient for div
http://tinkerbin.com/xXJQrgnk
Do you always know the background color of the DIV ahead of time? Is it always a solid color (not a gradient, no texture, etc)? Are your images roughly the same width? If so, I'd create a PNG that is the same color as the background, and have it fade to totally transparent at the right side. It can be any height since we'll tile it verically.
Drop the PNG over the image after you give the PNG the same height as the image and it will appear that the image is fading out into the background.
Related
I have a div with a red background and a 50% border-radius that contains a circular PNG image with transparency. The red is "bleeding" past the border of the image, which I do not want. See below for a screenshot.
I've tried adjusting the padding and the width of the image.
Is there a way to prevent the background of the parent div from appearing past the edges of the contained image?
I've reproduced the issue here (note the blue appearing above the pink circle): https://codepen.io/ScribbleScratch/pen/LYzjRYN
It looks like your pink circle image is not 350px (I am not referring to the size that you set it in your html). Here is it illlustrated with the marquee tool set at 349px. As you can see the pink circle image does not fill the marquee selection on the y axis, there is a white space at the bottom.
So when you overlay the two you see some of the blue css behind the pink image.
I have a div 40x40px, border 0, padding 0 with a background-color. on top I have a transparent png 40x40px which has an transparent area inside where the background color is visible through it.
My problem: the background is also slightly visible on top and right of the png like a small border. I want the png covers the whole background so that the background color is only visible through the transparency of the png and not at the two borders at all.
Here's the page: http://goo.gl/pFTcRr
Looks like it's your image that contains these borders.
Zoom a lot on your picture et you will probably see it :)
When setting a background-image for a <div> element is the required image size effected by the border?
I'm working on an retina iPhone project with a element that is 100% width. My background image is 640px wide and I'm using background-size to get it to display nicely on the retina display.
If I use a border on my <div> will i need to reduce the size of my image to get a 'perfect' display?
e.g.
320px(div) - 4px(2px border left and right) = 316px
So my image should be 632px (2x316) to get a 1:2 'perfect' pixel ratio.
Background images display within the constraints of the border — that is to say the border is not included in the space that the background displays over (it will display over padding, though).
It may be helpful to your particular case to use background-size: cover (MDN reference)?
I have 2 divs stacked. Means 1 div is on another div.
Both div has transparent background color.
So, when div is shown, both div in lower also shows because upper div is transparent.
If there is any way to make upper or lower div such that only upper div's shows with transparent background.
Means if there is image element stacked below lower div, image should be shown because uppder div is transparent but not color shows should be sum of both div's transparent colors.
So, current
Sadly in CSS there is no way to make a daughter element not inherit the transparency setting of the parent element. The best thing to do is to make div with the transparency on, then make a similar div of the same dimensions and what not and then position it, absolutely, over the transparent div. Then anything you want to remain non-transparent you can simply place in the second div.
If this doesn't make sense, reply and I'll try to make it clearer.
Mike.
I'm setting up a design that uses some gradients, and of course that causes issues. What I want is for my one background image with the vertical gradient to be the main background, but then if the content extends and pushes the div out, I want a different sliver image to repeat on the bottom. Is it possible to do something like this?
The closest you can get is using a background color with your background image. Then set the image to non repeating. Then the color will be the background for the parts of the div where the backgound image is not.