I have a svg background with a fallback png for devices that do not support svg. I try to give a background color too. It works in all desktop browsers, even IE8. But not in iOS. (I do not have any Android now to check)
In iOS. it works with svg, png or png and background-color or svg and background color. But it does not work with the 3 together.
So the question is, how to have all this together:
- iOS (and Android)
- background color
- svg
- png fallback
Please check your answer here: http://jsfiddle.net/TtWhH/
(I just use an img that could be in a public url, as example)
HTML:
<div id="grafic"></div>
CSS:
#grafic{
position:relative;
margin:0 auto;
width:512px; height:512px;
max-width:980px;
background-color:yellow;
background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Badge.svg');
background-image:none,url('http://www.w3.org/html/logo/downloads/HTML5_Badge.svg'), url('http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png');
background-repeat:no-repeat;
background-position:left top;
}
Related
I try to use svg file as some element's background image. When I save image as SVG 1.0/1.1 in Adobe Illustrator, it displays correct in my app. If I save image as SVG Tiny 1.1/1.1+/1.2 it doesn't displays in app.
I use next css:
background-image: url(img.svg);
Does iOS support SVG Tiny? Or what I must to do, that my SVG Tiny image will display in app as background image?
Yes, iOS and pretty much any browser/device that supports SVG also supports SVG Tiny. However, SVG Tiny is a subset of SVG intended for devices with poor performance, it will discard gradients, opacity, embedded fonts and filters. What is probably happening is that the features you are using in your file are being discarded by the Tiny format. SVG Tiny does nothing to save on file size.
In summary, just use SVG 1.1.
Here is what I need to do. I need to make a mobile app for ipad and iphone using phonegap and I need to set image background to all pages in the application. I was thinking to use a .png image in high resolution (the highest one I will be supporting), but I am not sure how to handle image re-sizing when the aspect ration is not kept. For example if I use image that is 1136X640 (iphone5) how it will look on iphone4 (res: 960 x 640). Or should I check the device and provide different images for different devices? Please help.
Use background-size propery in css3
e.g.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
IE hack (for lower than IE9)
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
It fits background image to your screen & still maintain aspect ratio of image.
Here is a good tutorial for you, Click Here
You can add the image as background in CSS like this :
body{
background-image:url('your_url');
background-size:cover;
}
This way it will fill your body
My page has a full screen background image, using cover. On Windows machines this looks fine, but when viewed on a MacBook, the image looks stretched and "cloudy". Why has this happened? My CSS is below:
background: url("images/backgroundimage.jpg");
background-size:100% auto;
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
background-size:cover;
I think your Macbook has a retina display. That's why your image is getting distort and stretched. If that is the case, you need to use retina ready images (that is 2X larger that the image you are currently using) to solve this problem.
Here is a nice article about retina ready website. A guide for creating a better retina web.
Take a look. It might solve your problem.
This works in iOS 6 and not iOS 5, so I'm assuming it's a webkit thing.
I have an image in my www/images folder, so I use the following html:
<img src="images/img.gif" />
However the image appears as the blue square with a question mark (iOS's image not found image).
How can I get this path to work on both iOS 5 and iOS 6?
Thanks.
I've noticed the same problem, the same code works fine in a local browser and in iOS6 onwards but doesn't display an image in iOS4.3, 5.0 or 5.1.
The solution that worked for me was to use a background image instead and style it with CSS, it also means that you can provide a high-res retina image and scale it for non-retina devices too.
replace your IMG tag with:
<div id="myImage" />
In your CSS file :
#myImage
{
background-image:url("../../assets/images/img.gif"); // The relative path from your CSS file to your image
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
width:100px; // Actual image size is 200px x 200px
height:100px;
}
The relative path to images from within a CSS file appears to work ok, but the path must be relative to the css file and not your html file.
If you want an image to display a 100px by 100px image on a non-retina device, you should create an image that is twice the size (200px x 200px) and let background:cover automatically change to the higher resolution when your app is running on a retina device.
I have a 'selected' class, and I've defined an embedded background image along with a webkit gradient. It works on safari on my iPod touch running iOS 5.0.1, but neither the image or the gradient shows on my iPad running iOS 4.3.4. Any tips on making this more compatible?
.selected {
background:url(data:image/png;base64,blablablabl==) 14px center no-repeat, -webkit-linear-gradient(bottom, red 0%, blue 100%);
}
Note that the image displays correctly everywhere when I don't include the gradient.
I worked around this by using the CSS before attribute: http://www.htmldog.com/reference/cssproperties/content/
.selected::before { content: url(data:image/png;base64,blablablabl==); }