admin 管理员组

文章数量: 1086019

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
Share Improve this question asked Aug 26, 2013 at 14:58 user1778459user1778459 1152 gold badges4 silver badges12 bronze badges 6
  • 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
 |  Show 1 more ment

2 Answers 2

Reset to default 4

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

本文标签： javascriptHTML CSS fullscreen background with an imageStack Overflow

版权声明：本文标题：javascript - HTML CSS fullscreen background with an image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744059156a2526401.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。