Hi I would like my background image to wrap up the content/text inside it. The text seems to overflow from the background image and overlaps other text. It all works well on desktop but when I try to open Codepen in my iPhone, it didnt turn out as how it is expected to be. Please refer to pictures I attach here.
`https://codepen.io/sharonloh/full/pBrdRd`
I am new to coding and I have tried various ways after trying to search for solution but nothing seems to work.
From the picture you posted, there are various potential resolutions.
The first potential issue is that you have set a background image but not set other background attributes.
One way to resolve your issue would be to add a repeat
to your css:
background-image: (your image);
background-repeat: repeat;
Add this to your css for the image/background class. If you only want the image to repeat vertically, you can use repeat-y
instead of repeat
. Similar for horizontal/repeat-x. Another way would be to use background-size:cover
.
If you only want it to repeat on smaller screens you can add a media-query and add the extra attribute there.
Do add your css/html in future (now would be preferable! You can edit your question to add code). It helps to give a clearer picture of how to resolve the problem.
Hope this helps