Is it possible to repeat-x and repeat-y just a specific portion of an image sprite? I can obviously separate the image into different files, but I was hoping there's a more efficient way of doing it.
Not for background - CSS3 provdes this for borders. You can combine a tiled background with a sliced border to achieve the desired effect.
(Browser support is not complete, though)
Related
have some live computed graph images from a source we don't own, and they have a white background that doesn't fit well with where we are displaying them. Is there any html/css way of getting rid of the white background? (javascript isn't an option in this case)
I was looking at css masking - tried setting the mask-image to be the same image, and the mask mode to be luminance -
html:
<img src="https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048" >
css:
img {
mask-image: url(https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048);
mask-mode: luminance;
}
that seemed to me that it should work - but it actually had no effect at all :(
First of all you should know this: https://caniuse.com/#search=mask
And then look at this fiddle: https://jsfiddle.net/9y27jaLh/1/
As explained in caniuse, there's partial support for webkit i.e. prefixed properties will work such as -webkit-mask-**
mask-mode is not supported in 90% of the browsers, including webkit based.
Also "luminance" means the areas with the brighter colors will show while the darker ones won't, and a whole gradient of in-betweens. So it's pretty much the exact opposite of what you need.
If it's just to change the background color, you might slightly tint it, perhaps with a semi-transparent overlay. If the images have a known shape, you could try clipping / masking with SVG patterns..
or maybe try to hack it setting the images as background and searching for a background-blend-mode that does the trick... sort of.
But no way to apply the same image as a mask to get rid of the white
How can I change the white color to the red, but only white should be changed, the rest should be what they are.
Using only CSS
CSS can't be used to dynamically edit certain pixels of an image, as far as I know.
Alternative solutions:
You could overlay another element over top of the image with a partially transparent red background to sort of "paint" the image red, but this wouldn't achieve exactly what you're asking for.
You could have another image to switch it to that has the red background. You'd switch the image likely by doing something like background-image: url(https://new_image_here)
You can use JavaScript or similar to modify the image or provide a fancier solution...
On a valid background, I need to add transparent holes/images that shows body background.
Like this websites;
skrill.com
skrillex.com
I can add it as a image but I should resize it according to resolution. Also I'll add some descriptions under this images.
Is there any way to do this?
There are three ways to achieve this effect:
Make the solid background a SVG or PNG, with holes cut through to show the underlying background.
Make the transparent images replicate the background.
Implement the background with <canvas> and use JS to achieve this effect by dynamically redrawing the background.
The sites you linked are using one of these approaches.
What is the optimal way to slice up this background image for optimal CSS implementation? The designer knows no CSS and since we're not CSS experts, we're not sure of the best way to slice up the background image. The background, of course, should be fluid and scale to different monitor sizes and page lengths. At the same time, it seems sub-optimal to have one large image or multiple small images.
We don't need to support IE6.
Any advice?
By slicing, I'm not 100% sure what you want exactly. I assume you are looking for a way to stretch the Facebook part as much as needed, while still keeping the background image decent.
For most non-phone (ie desktop or tablet) screens, you could cut below the last cloud and have a repeat vertically of the blue sky background. With the CSS property background-repeat: http://www.w3schools.com/cssref/pr_background-repeat.asp
You'd have 3 divs with margin: 0:
the hmm panabee (actual content) div, background image is the balloons, centered. You expect its height to be greater than your image's height. If you want to enforce it, there's min-height. Bottom of this image should be blue sky.
the facebook div, can be as big as you want if you use the background-repeat with the blue sky image.
and the footer div, with a background image of your choice, but the top of the image should be blue sky.
I think all this (except min-height, maybe?) should work on most browsers, even IE6.
CSS3 supports multiple overlapping background images (you'd want them to be transparent PNGs or similar), as well as the background-size property allowing you to adapt to different window sizes. It seems to me this would solve your problem exactly.
Check here to see if a feature is widely-supported enough for your target audience.
I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.