0

I nearly have my new website complete. Everything is done with the database finally connected and working perfect, the only thing that is failing on the site is the styling on mobile devices. No matter what I try the background moves and it shows a background color on the first page which is what I don't want.

I need your specific help in trying to make sure the background DOES NOT move, and the background color is not directly visible on the first page. Thank you! :)

In my <head>:

<meta name="viewport" content="width=device-width" />

My Css Code:

img {
    max-width:100%;
}
@viewport {
    width: extend-to-zoom 980px;
    min-zoom: 0.25;
    max-zoom: 5;
}
body {
    margin:0;
    background:url(../images/bg-body.png) repeat-x left top #a6a6a6;
    font-family:Arial, Helvetica, sans-serif;
}
a {
    outline:none;
}
a img {
    border:0;
    display:block;
}
.background {
    background:url(../images/bg-background.jpg);
    background-color: #696969;
    background-position: 0 100%;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
    background-size: 100%;
}
Arnav Borborah
  • 11,357
  • 8
  • 43
  • 88
Ketih Carpenter
  • 85
  • 2
  • 3
  • 9
  • Post you HTML as well, with a minimal working code snippet – Asons Jul 04 '16 at 15:38
  • `background-size: cover` cannot be used with `background-attachment: fixed` - Possible duplicate of [CSS background-size: cover + background-attachment: fixed clipping background images](http://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im) – Adam Jenkins Jul 04 '16 at 15:39
  • sorry guys, i just updated with the view port that i have – Ketih Carpenter Jul 04 '16 at 15:39
  • @KetihCarpenter Please format your code correctly, it makes it easier to see! – Arnav Borborah Jul 04 '16 at 15:42

0 Answers0