If I'm using background-size: cover and I want to make sure my image looks good on a retina macbook pro which has a resolution of 2880x1880, do I just need to make the image that resolution, or does it need to be double that resolution to look good because it's retina (as in when you have an image in the site at say 800px x 400px but displayed at 400px x 200px to ensure that it looks good on retina).
.bg {
color:#CCC;
background-attachment:fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
Thanks - greatly appreciated.
Make the images approximately the resolution of the device. You will likely want to adjust a bit for browser/webclip chrome so the final image size will be a bit different.
See Custom Icon and Image Creation Guidelines for more information.
Additional Background
Retina display devices have a devicePixelRation of 2 - which is the ration of physical pixels to device independent pixels. From quirks mode:
Dips are the abstract pixels that are used to feed information to the
width/height media queries and the meta viewport device-width. They
are best explained by taking a look at the difference between retina
and non-retina devices.
Taking the iPad as an example, if you were to set the viewport to device-width you would end up with (Safari always uses DIPS - see quirksmode):
DIPS Physical
-------- ---------
non-retina: 768x1024 768x1024
retina: 768x1024 1536x2048
You layout your markup based on DIPS but use images based on the physical pixels (x2 in the case of retinal displays).
Another way to look at this is: since the rule of thumb for retina is 2x the size of an non-retina image, use 2x (768x1024) for retina or: 1536x2048
Also, beware of the real-estate taken up by browser chrome. For example, the status bar takes up 20px from the overall screen.
Related
I have set up a background-image for large and medium screens.
I have a touchbar macbook and it fits perfectly.
If I play with the mouse to make the window smaller (to see how it would be for different resolutions and less pixels), it's completely responsive and looks fine (it cuts a bit the right part of the picture but it's not zooming).
Same when I open the developer tools, the Ipad pro version is half-cut but not zoomed.
But when I try to go on the website with an older macbook, the image is completely zoomed and does not fit the screen anymore.
I don't understand how there can be such a difference as we have different resolutions but same inches.. And as when I play with it on my computer, the image stays at the right size even with less pixels.
How can I solve this problem? Why is it doing this? I am fine if the image is a bit cut on the right or left side but I don't want it to be zoomed.
I have tried - height: auto, width: 100vw, background-size:contain (but it's too small) and no-repeat... basically everything with css
background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;
Thank you
When you use cover for background it is guaranteed that the same image will NOT look perfect on all screen sizes, since the browser needs to display it in different dimensions.
To handle this you may generate several images, each for screen size you aim at and use CSS media queries to apply the appropriate image for each screen size.
I often use a header with a full width background-image like this page http://thegreatdiscontent.com/adam-lisagor
What kind of media query -stack would you use for the background image?
I would like mobile devices to use images that are not too big in filesize, but also have retina devices have retina-images.
So maybe have something like a one big media query for retina macs, maybe one with really compressed image with retina size for the retina ipads. Maybe one for small mobile devices, retina and non-retina..?
It get's pretty complicated and of course I'd like not to have a list of 20 media queries to target different screen sizes with different resolutions and different (assumed) internet speeds.
Thoughts? What devices would you prioritice?
Thank you.
I think you misunderstand the point of CSS media queries. They won't change the file size being served. CSS is just client side script. If you want to serve images with a smaller file size for smaller screens or slower internet connections, you need to do that on server side.
Take a look at Adaptive Images to do that: http://adaptive-images.com/
Media queries only allow you to resize the original image, so it still loads the full size image, then resizes it.
The background-size property works nicely to keep a background image filling the available area. E.g.
#header {
background: url(image.png) no-repeat;
background-size: cover;
}
You can save the image at a large dimension but at a relatively low quality and it will look good on all devices, including retina screens, as explained here: http://blog.netvlies.nl/design-interactie/retina-revolution/
I have created icons of 2 sized 40px X 40px and 80px X 80px for normal display and retina display respectively.
what is the proper way to use these 2 sizes of icons?
I mean should i change the dimensions of element for retina version to 80px X 80px or use background-size property to fit the large icons in 40px X 40px size?
You should follow the Safari Web Content Guide from Apple.
Specifying a Webpage icon
It depends on how you are using these 'icons'. Are they web app icons, images within the web page or background images?
Firstly retina images should be named with #x2.e.g.
Standard
sample.png
Retina
sample#x2.png
For web app icons see the previous answer from cpattersonv1
Background Images
This can be achieved with the use of media queries. A media query to target retina capable devices would look like this.
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
}
From within the media query you can then specify your retina image for the background-image.
I found that i need to keep the dimensions in CSS same for both normal and ratina versions, and fit the large image in normal dimension using background-size property.
This is how it looks in desktop:
This is how it looks in mobile:
Relevant css:
styles.sass:
item
.row
cursor: pointer
height: 297px
.top-border
border-top: 2px dotted $brand-four
margin: 30px 0 40px
Live site:
http://alexandrochen.com/
(I'm using the Foundation framework).
What could be causing this?
The pixels may be different sizes.
Some browsers also allow magnification of rendered elements to help the visually challenged so the sizes can be different.
The pixel "physical" size on various devices depends on the pixel density (measured in pixel-per-inch or ppi) and the multiplier the device is using.
For example, MacBook Pro Retina 15" has 220 ppi, while the regular Macbook Pro has 110 ppi. But the OS is multiplying the pixel count internally by 2 in retina so the "physical" size of your item should be similar. But since retina is using twice the amount of pixels to render the same amount of data, bitmaps will look pixelated.
Check this out for more information on which device has what ppi: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
For some unknown reasons, iPad Safari doesn't display a really long background image. In my example, the background image is 1,000 x 10,000 pixels. The same example works on any desktop browser e.g. Safari, Firefox, etc.
I am aware of the background-repeat in CSS but unfortunately it isn't applicable in my specific case.
Mobile Safari has limits to what size background images it will display before subsampling, you may be getting hit by this problem because of the size of your background:
The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.
see: Know iOS Resource Limits
You can achieve this by using multiple background images. Slice up your long jpeg into manageable chunks that conform to the limit, and then use css3 magic to merge them all up into a single background.
For example I sliced up a 7400px high image into 2048px chunks and position them back together with this:
background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg');
background-position: center 0px, center 2048px, center 4096px, center 6144px;
background-size: auto auto;
background-repeat: no-repeat;
This loads on the iPad at full resolution.