In this blog post I will explain how to make your background image fixed in the Safari browser on an iPhone
In this Codepen example you'll find a solution how to make the background image fixed in the Safari browser on an iPhone only with CSS.
Shortly explained: for the background image we'll be using an <img>, fixing it with the help of postition: fixed and to ensure to be behind the default level we'll set z-index: -1. With the help of top: 0, right: 0, bottom: 0 and left: 0 we say the image thanks to the postition: fixed that it has to be full screen. For more legacy support I will not use the new inset: 0. To make sure that the image will be the full background, we need so set the with and the height to 100%.For that it is required to use display: block because the <img> is not a block element by nature. Last but not least we set the object-fit: cover to get the typical unstretched full size background image.
Top comments (0)