Search code examples
htmlcssbackground-imagebackground-color

Text overflow from Background Image


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.

Text overflowing from background image


Solution

  • 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