0

I am trying to do a fixed div with an image set as background-image. I set the background-size to 100% so it doesn't repeat or being too small for big screen resolutions or when zoomed out. The problem now is, that on mobile devices, the background image gets too small and moves out of the visible area.

How can I solve this problem? Is there a better solution then background-size:100%?

CSS:

.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}
Bla...
  • 7,228
  • 7
  • 27
  • 46
sunilson
  • 1,449
  • 15
  • 31

1 Answers1

0

To answer your comment, yes you can set a min-width, max-width, or min-height, max-height in your CSS.

.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
min-width: 400px; /* change this to your choice */
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}
Hunter
  • 67
  • 2
  • 3
  • 10