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==); }
Related
The following is the UIImageView, using SFSymbol face.smiling
UIImageView background is pink color
UIImageView tint is black color
When I switch my app to dark mode, the smiling face which use to be transparent color, has became solid black color.
The face line (eye, mouth, face border) used to be solid black color, had became transparent color.
I would like to avoid such outcome. Is there a way, to force UIImageView load SFSymbol in light mode, even though the entire app is using dark mode?
Here's the the testing looks like - https://www.youtube.com/watch?v=Rhf9nn5vdK4 (This happens same when I test using real device and simulator)
Thanks.
Same issue here, but managed to easily fix it with the following:
iconImage: .init(systemName: colorScheme == .light ? "face.smiling" : "face.smiling.fill"),
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.
In order to be consistent with iOS 7, I want to use 1px thick vertical separators in my app.
To do that, I have created an asset of 1 px width.
While applying it to legacy displays, iOS resizes the width to 0.5 px. How can I force iOS to retain the width i.e. 1px even for legacy displays?
What you are probably seeing is 1px thick on legacy and 2px thick on retina.
In order to support legacy displays, there must be two copies of each asset. Assuming your image is called image.png, the legacy one should be at half-resolution, called image.png and the high-resolution one should be called image#2x.png.
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;
}