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 have a transparent sprite PNG image - with 50% size for a Retina screen.
The weird thing is my PNG images on regular monitor have those little white line artifacts on them, which are especially visible in Chrome.
Here is a screenshot (it's a bit small, but hope you see it):
and zoomed to 400%
Retina screens are not different on size, they are different because of the pixel density. So making images 50% smaller, won't do the trick. You will need to assign background-size: 50% 50% instead.
This will make your browser render the image but 50% smaller. Since their size is actually bigger than the displayed size, the remaining pixels will be merged according to the pixel density of your screen.
If you are still doing this and the problem persists, then the problem is from the quality of your image itself.
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.
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 an 40px by 20px image with 72 Pixels / Inch.
I would like to create a Retina display version.
What should I do? Double the size? Change the resolution?
And in which format should I save it? PNG? JPG? ...
I am using this image on a web site ...
In your image editor, double the size of your image to 80px by 40px.
In your markup set the width to 40 and height to 20.
<img src="example.png" width="40" height="20" />
You should save as png if you need transparency or the image is line art. Save photographs as jpg.
My answer is convert your image into SVG
Do you have Illustrator? If so save your image as SVG (and have a png as a fallback if you want).
<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />
As long as you use Modernzr which can work to get svg friendly in most browsers.
You can see it here how it's done:
http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
Hope it helps :)
A retina display image (or high-density display image) is double the pixel size of a standard image - its scaling factor is 2.0. This means that yes, for your 40x20 pixel image, you will need to make an 80x40 pixel version (that is then displayed at double pixel density on screen). The format doesn't matter as much, both PNG and JPG will work fine (PNG will not degrade in quality with compression, but the file size will be larger than JPG).
However, the problem with high-density display images is that they take up more bandwidth, and are unnecessary for devices that don't have the high resolution or Retina displays. This means more data transferred over the network, inconveniencing mobile users and those with limited data transfer caps.
One solution is to use something like Retina.js. It's an open-source javascript client script that will automatically load the retina-sized image from your server and swap it in-place for the low-density version, if it exists. It follows Apple's standard for naming high-resolution images - #2x, so you can have HTML code like this:
<img src="/images/my_image.jpg" />
and the script will search your server also for /images/my_image#2x.jpg. If it exists, it will load it and swap it in-place without having to worry about messing with CSS.
Generally as of this writing there are two types of retina displays, hence you should create an image for each type.
For a 2× device, you would need to produce twice the logical pixels' width and height with a resolution of 144 pixels per inch (72 ppi ✕ 2).
For a 3× device, you would need three times the logical pixels with a resolution of 216 pixels per inch (72 ppi ✕ 3).
Examples of 2× devices are the MacBook Pro (released in 2012-2019) and most iPhone since the iPhone 4. Examples of 3×
devices are the iPhone 6 Plus, and the iPhone X. However the iPhone Xr is a 2× device.
Hence for your case you would need images in 80 px ✕ 40 px and 120 px ✕ 60 px for 2× and 3× devices respectively.
Retina displays are not dependent on the specific bitmap image format. You can use the original image format. For websites, you should use JPG for photographs and PNG for line-art graphics saved as bitmaps.
You should not just blindly enlarge images otherwise this would create a blurred results – it would no better than if you don't include any high-resolution versions in the first place. Either obtain the original higher-resolution version of the images (typically from vector graphic source) and downscale them or use a machine-learning based image enhancement solution such as Bigger Picture to "convert" your image into a higher resolution.
Photoshop gives you a couple options for resizing an image. For instance if the image is iPhone size you can increase the image size by 200%. Photoshop gives you a couple options for resampling of the image. Bicubic, bilinear and etc. This will remake the image at a higher resolution and interpolate the missing pixels. Hope this helps.
This is a really interesting article showing a nice option for dealing with high res images:
http://blog.netvlies.nl/design-interactie/retina-revolution/
Basically, it's saying that, if you make the image quite large (width and height) but then save it at quite low quality, it still comes out very sharp on retina displays. It means that you can use the one same image on all devices, and that the file size is very low, too, which is an extra bonus. You can set the width and height of the image in your CSS and/or HTML to set it to the visual dimensions you desire.
This article blew me away, and is my go-to approach for dealing with both retina-friendly and bandwidth-friendly images. Win, win.
You can use CSS opacity option.
This will give you an transparent look of your image based upon the value you set to opacity.
Try learning opacity: http://www.w3schools.com/css/css_image_transparency.asp