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
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.