background:no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Creating responsive CSS background images

Responsive web design was discovered to ensure that images and content on webpages adapt intuitively to the size of device’s screen for a joyful browsing experience. CSS background image too serves this purpose.
Unlike text and other elements of graphic designing, images don’t merely convey information. Rather, they present visual information in a manner that proper emotions are evoked. This implies that the integrity of the image must be maintained. Images which are out of proportion, frayed, skewed, or damaged may not be able to deliver the intended message properly. The purpose of design is lost and the credibility of your site would also be diminished.
With the help of responsive web designing, the distortions in image sizes across devices can be rectified conclusively. For images, the problem can be resolved by using CSS attributes like width and max-width. The viewport meta tag, if set, is great for ensuring correct display of images even on smaller screens.
This post would give you an insightful overview of the different ways in which you can optimize on the image, both foreground and background, size.Scaling pictures appropriately is possible with coding. The popular ways of styling a CSS background image would be discussed. If a particular image would not appear aesthetically proper on both large and small screens, the problem can be addressed by using two different images for various screen size considerations.
#Important Facts about Responsive Images
CSS image responsive mode facilitates auto-resizing based on screen size
The image gets reoriented when the window orientation changes
Image clarity and resolution are not compromised
CSS width properties can be set to render the image responsive
CSS background images can be styled in 3 main ways
Alternative image files can be deployed for different devices with varying viewport size
#Scaling CSS Images
As the dimensions of the browser window change in response to the screen size of the viewing device, the image should correspondingly transform itself. This is accomplished by setting the properties for max-width or width.
Different options are: * Setting width to 100% allows the image to be scaled up or down intuitively * Max-width property prevent the image from getting scaled up more than its preferred size * Max-width prevents the image from getting pixelated * If max-width of image is set to 100%, the image can only be scaled down and not up
#Insertion of Responsive Image
After you have decided about the scaling mode to be used, you have to add the image file to your website. You may be undecided about which image to use for best results.
You need to choose an image whose size as well as quality corresponds to the largest type of viewing device available. If you experience problem, then use max-width property and not width to prevent unwanted scaling up of image.
img { max-width: 100%; height: auto; }
#Background Images with CSS properties
Just like images to be presented on the webpage, the background image sitting at the back of the content too has to be scaled up or down. To render the background image responsive, you need to follow any of the 3 methods available for resizing and scaling the images.
Method 1) Maintaining the Aspect Ratio
If the image size is small but you want to retain its quality, this method is desirable
The background-size property is to be set to ‘contain’
Scaling of the CSS background image occurs for fitting the content area
The aspect ratio would not be lost and image would not get blurred
div { width: 100%; height: 400px; background-image: url(‘img.jpg’); background-repeat: no-repeat; background-size: contain; }
Method 2) Image Stretching
CSS background image can be stretched for filling up the entire viewable area
No need of paring any portion of the image to ensure proper fit
The image can be stretched out of the desired proportion for filling the area
The background-size property has to be set to 100%
div { width: 100%; height: 400px; background-image: url(‘img.jpg’); background-size: 100% 100%; }
Method 3) Filling Up the Area by maintaining Aspect Ratio
The background image can be made to fill up the entire visible area
The aspect ratio is kept intact
A portion of the image may be pared to maintaining the proportion and size
Setting background-size property as ‘Cover’ helps you avail of this method
div { width: 100%; height: 400px; background-image: url(‘img.jpg’); background-size: cover; }
#Using Alternative Images for Various Devices
The impact of an image in high resolution would be more if the same can be viewed in its full glory in a large sized computer monitor. The website in which the image would be embedded too would appear more appealing.
However, the size of high resolution image would be more. If someone is trying to view the website on a small screen like that of iPad, his/ her experience would not be a rewarding one. This is because thepage loading time would be more as the image has to be scaled down prior to displaying.
To get around this problem, media queries are used for displaying various images on screens of differing sizes. A large sized and a small sized image can be used alternatively. Depending on the size of the screen, the image that would be considered most suitable would be used to complement the website design.
The responsive web design wire frame would have both image sizes which would cater efficiently to various conditions. The media query min-device-width is to be used in place of min-width. The query makes the image responsive to the viewport width of the viewing device. The image would remain unaltered even when the browser window is resized.
div { background-image: url(‘img.jpg’); }
/* For smaller screens */ @media only screen and (max-width: 762px) { div { background-image: url(‘small-img.jpg’); } }
#HTML5 based Image definition
In HTML5, element is used for defining images which are 2 or more in number. The image source is specified by setting the ‘srcset’ attribute. More than one source for the image can be set with ease. However, the order of defining the source matters the most. The source that complements the preference assigned by your code is used first.
Although, you may not need the ‘media’ attribute but the same can be set for accepting the media queries. The  and elements must be defined necessarily to ensure that the web images are viewable on archaic browsers on which HTML5 is not supported.

Conclusion The quality of content and graphic design elements would be maintained irrespective of the device from which your brand’s web page is being viewed. The images would resize and reorient themselves based on the browser and screen characteristics.
We would specify the best CSS width properties to ensure that the size of image is optimal for responding to changes. The best method for scaling the CSS background image would be used. Varying image files and sources would be used dependent on the size of the viewport.

other https://stackoverflow.com/questions/61945988/background-attachment-fixed-does-not-work-in-safari
https://archive.joomshaper.com/forums/background-fixed-image-on-ios-mobile-devices
Background-fixed by default is not supported by iOS browsers.
But there are some solutions which may help:
https://forum.webflow.com/t/ios-fixed-background-image-not-fixed/42895
https://stackoverflow.com/questions/41436892/background-attachment-fixed-doesnt-work-on-ios
https://www.sitepoint.com/community/t/fixed-background-on-ipad/203905/15
https://codepen.io/gentlemedia/pen/JJEzwO
https://www.sitepoint.com/community/t/fixed-background-on-ipad/203905/17
https://www.template-creator.com/en/blog/2-non-categorise/79-background-image-fixed-position-and-ios