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.
Related
I have a navigational div (div A) running horizontally with a div (div B) z-indexed above it that will contain a cross fading series of background images using jquery to set background-image property every 5 seconds. However, I need the section in red to be "masked" out over the background image of the div while the blue sections need to be transparent through to the lower div (div A). The masking/clipping would be applied to and be the same no matter which background image is displayed.
Because the end user may upload new images to use as the cycling background image there wont be an ability to edit the images through an image editor to create the masking and transparency so....
Can this be accomplished through some combination of HTML 5 masking/clipping functions being applied to the background-images or containing div (div B)? If so can someone show me example where masking/clipping have both been applied to an image?
If not, can someone advise a different method other than image editing before upload?
To clarify: You want every red pixel to become transparent?
Here's an explanation of how to do it and a Demo: http://jsfiddle.net/m1erickson/2oun9t1x/
draw the background image on the canvas.
make a "masking" image containing only the red pixels you want to use as a mask.
set compositing to 'destination-out' which will cause any existing pixels to be made transparent where they intersect new drawings: context.globalCompositeOperation='destination-out'.
draw the red image to "erase" the image only where it intersects those red pixels.
Background image (left) and Mask (right):
Background image masked using compositing:
If I make a div that has 50x50px dimension, and I make an image (sprite) that has 50x100px dimension. Then one image is on top of the other.
Now, if I make a hover effect on the div, where the image should change, I would just change the background position from top to bottom as an example. Then when I hover the image changes and so on. Easy...
But, if I use a transition timer, then I will see the image move from the top, to the bottom.
My question is: Is it possible via sprites to make fades instead ? I mean, lets say I have an image that changes color. Then I don't want it to like like the image is going up and down, but just fade in the color of the other image and so on.
Is that possible via sprites, or do I really have to just onclick-change-image events etc. ?
Thanks in advance.
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.
Is the background-position css property used to indicated where in the element should the image be displayed (like this) or what part of the image should be displayed (like when using sprites) ?
In my instance i have a div of let's say 300px width, i want the image to be shown in the right part of that element so normally i just added a center right to my background declaration, though now my image is a spirit so how can i control the coordinate of the image that i want to display ?
Seems to me that this background property act in 2 different way.. Am i missing something ?
If the place where you want to put element of the sprite is larger then the element then you need to put white space (trasnparent) around it. And you can't use keywords like center, you need to use pixels, because you will center whole sprite and not your element.
Using sprites is like using window where background is larger then background image so you need to position the window (actually you position the background).
If your container is larger than the background sprite image part you want to display then the other part of image will also be displayed. Better use Sprite cow to generate sprite it will give you the css for different parts of sprite image
http://www.spritecow.com/
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
it's size is much larger than my 64x64 image
the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.
The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.