I'm working on a website which uses a fullscreen background image. And in order to make it work on all screen types I'm using jquery backstretch plugin.

The problem I have is the background image has some text on it and if the screen size gets smaller, the image on the background and the image on top overlays each other.

It's rather difficult to explain so here is the actual page;

preview page

if the width of the page goes down below 1700 pixels you'll see the problem.

Is there any way to solve this problem without separating the text from the background?

I'm working on a website which uses a fullscreen background image. And in order to make it work on all screen types I'm using jquery backstretch plugin.

The problem I have is the background image has some text on it and if the screen size gets smaller, the image on the background and the image on top overlays each other.

It's rather difficult to explain so here is the actual page;

preview page

if the width of the page goes down below 1700 pixels you'll see the problem.

Is there any way to solve this problem without separating the text from the background?

• javascript
• jquery
• html
• css
• fullscreen

• The background is working fine. The only issue is the choice of background conflicts with your content. – Kevin Lynch Commented Aug 26, 2013 at 15:02
• Yes I know, but is there any other way you could think of to solve this issue. – user1778459 Commented Aug 26, 2013 at 15:05
• use a different background for small screen sizes? – andi Commented Aug 26, 2013 at 15:07
• What exactly are your constraints? – andi Commented Aug 26, 2013 at 15:08
• If I manage to separate the chalk writing from the background I could easily make it work, but in this case I can't think of another way. Using different images for different screen sizes might work, but I'm looking for a more reliable and easy solution. – user1778459 Commented Aug 26, 2013 at 15:12

2 Answers 2

you can use background-size: cover;

{
      background: url(http://alicantest.info/public/_images/anasayfa_bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

or use an other image in media query

@media screen and (max-width: 1700px) {

    {
          background: url(newImage.jpg) no-repeat center center fixed; 
    }

}

You could add a semi transparent background to the text when the screen is smaller with a media query

@media screen and (max-width: 795px){
    #map_text {
        background: rgba(0,0,0,0.7);
    }
}

Put this code at the bottom of your CSS