I have a question and I hope someone can help me out. What I am searching for is an equivalent of the CSS property background-repeat in SVG images. Is there any hack to achieve repeating raster images as fills? The point to this is that I am designing a website and want to experiment with SVG graphics to make it scalable. So when the user zooms everything stays perfectly sharp. However, I also need "grainy" raster textures. Now if I apply a raster image as a texture in Illustrator and save it as a SVG, the textures zoom along with the file and a subtle grain becomes ugly blocks of pixels. Now I am searching for a possibility to repeat the image instead of scaling it on zoom. Does anyone know a hack to achieve this?
Another possibility I thought about was taking the raster image out of the SVG and applying it as a background via CSS. Unfortunately there seems no way to prevent a background image from zooming through CSS or JavaScript. Which makes perfect sense because anyone doing so on content elements would certainly go to accessibility hell.
See SVG Patterns. I believe that you can use the patternUnits and patternContentUnits to achieve your zoom-independent behavior, but have not verified this.
I was able to make this work by using the background-size values set in ems rather than percentages. I created the SVG at a larger size (30px x 90px) and scale it down to my target size using ems.
body {
font-size: 15px;
background: #fff url(stripe_pattern.svg) repeat-x left top;
-webkit-background-size: 0.5em, 0.5em;
-moz-background-size: 0.5em, 0.5em;
-o-background-size: 0.5em, 0.5em;
background-size: 0.5em, 0.5em;
}
That at least works for modern browsers. IE can fall back on the raster versions.
Related
I've noticed that when displaying small images with a scale of 1:1 they often look blocky. I can overcome the problem when using the <img> tag by using a larger scale image and setting the desired size with css.
But, I'd like to load my images with css with background: url(...)
When doing this if I set my element size to less than my image size then the image is only partially displayed, I can overcome this using background-size but I understand that this isn't very cross browser compliant?
Take a look here to see what i mean http://jsfiddle.net/uSqJW/
yes you can do this by background-size property but you need to remove that background position or make it 0px 0px from left and top respectively. This property will not be functional below IE9.
AFAIK background-size is the only way to set the size as there is no ratio option, but it is well supported - see http://caniuse.com/background-img-opts
This is a good article about the benefits and machanisms of loading higher resolution images http://www.html5rocks.com/en/mobile/easy-high-dpi-images/
I am trying to implement a full page background image as discussed here.
I am using the first method, the CSS3 technique. However, when I use background-size: cover like the author suggests, the image is "zoomed" in way farther than it needs to be and I don't understand why.
Is it a problem with the size of the image or do I have something else wrong?
Here is a link to the page.
achievable I want to see the entire tree, trunk and all. I've already tried setting the background-size to "100% auto" and the effect is the same. I've also already tried background-size to "contain" and now the image is too small.
No JavaScript solutions please. I know this achievable with just CSS.
UPDATE
Contain looks good on a desktop site, but it looks bad on a phone/table. Cover looks good on a phone/table but bad on a desktop. I guess I'll use the one that looks the best on each device?
UPDATE
I think I could use contain across the board, I would just have to resize the bg image to be thinner for smaller devices.
I believe we can suffice this requirement by using following two Solutions:
a. Use background-size:100% 100%; I am able to zoom image properly by using this Solution.
b. Use img tag with height and width as 100%
Change background-size: cover to background-size: contain
It looks perfect this way!
I'm using this to set my background image.
body{
background: url('path_to_image');
background-size: 100%;
}
I'm happy with how background-size handles small differences in screen size.
I'm designing my background image in gimp to be a blue abstract image. What size would be good to handle the most common screen size ( in pixel width and height ), and what is a good image format to export it in?
Here is an example of one background image I tested with:
http://dooid.me/images/uploads/1334771136brentreader.gif
Most common screen size reported ( link here ) by browsers appears to be:
1366x768
1366x768 sounds good if that's the most common screen resolution these days. File type should be .jpg if your image has many gradients and subtle details, or .png (or .gif) if your image is mostly solid shapes with no anti-aliasing, such as pixel-art. Always keep in mind both the quality and the file size when exporting your image !
It's also good that you're using an abstract image for your background, as using background-size:100% can lead to stretching in unintended resolutions (which would look silly with more figurative pictures !).
I have a background image, 1000x666px, and only 93kb. I use it as a background image, with this code:
url(/Optimized-image1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
When i set this image as a background, my jquery effects are very slow and not smooth at all. The same happens with my google maps stuff.
When i set the background just white or any other color, it's all smooth, so I think my CSS-code isn't that good.
I've tried to preload the image with javascript, but that's not good. Also base64 is not working.
Any tips?
It seems background-size: cover; performs poorly, at least in chrome.
see Poor performance of Chrome using background-size: cover
Here's a list of alternative solutions http://css-tricks.com/perfect-full-page-background-image/
Have you tried layering your images and dom objects with z-indexes to make sure they arent competing for resources?
Firstly, you can optimize your images with SMush It . Also you can optimize your all CSS files with Clean CSS .
If you want to 'smush' your images dinamically, you can use Smush It, still.
1) User will upload an image
2) Get new uploaded image's URL ($imgurl)
3) Make a request to
http://www.smushit.com/ysmush.it/ws.php?img=$imgurl and get it's
content (it's a JSON) to $content
4) parse JSON with $newimage = json_decode($content);
5) Your new and optimized image's URL is $newimage->dest download
and use it :)
I have following CSS:
background-div: url(/images/top.png) no-repeat top center;
and I am using the following filter for IE6: ( Transparent PNG Hack)
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/top_arrow.png',sizingMethod='scale');
How can I add the background position (i.e. top center) to the filter?
There are heavy restrictions on this method and you cannot add the background position.
Let me suggest trying out this method instead, it allows much more flexibility than the simple approach you're doing now. It's been engineered over the years and is the best fix I've encountered (and there are quite a few fixes out there.)