HTML CSS fullscreen background with an image

Question

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?

Answer 1

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; 
    }

}

Answer 2

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