Search code examples
phpcssjoomlastylesheet

CSS background not resizing in mobile but resize works on all desktop browsers

I have a background image that will not resize in mobile. By all accounts it seems it should work as it resizes in every browser user-agent app I can find. Here is my code...

Header meta...

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS

.row-feature.row-feature-primary {
background: url(../images/lonelygirl2.png) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}

I am using Joomla, and I'm linking this to a module class.

Solution

  • This should not be a problem, and probably not due to the CSS. I would consider reformatting the CSS like this:

    .row-feature.row-feature-primary {
    background-image: url(../images/lonelygirl2.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}