In Webkit based mobile browsers such as the native android browser the background overlaps the whole site because this CSS property seems badly supported: background-attachment: fixed;
I temporrily fixed it by checking if the device has more than 800px resolution and only then displaying the image (file: css/main-css.css)

@media screen and (min-width: 800px) {
    body.custom-background {background-image: url("../images/sampleimages/main-bg1.jpg"); background-repeat: no-repeat; background-position: top center; background-attachment: fixed;}

Alternatively you can just remove 'background-attachment: fixed', but you will have an image that's scrolling.

Another issue I've found is the property overflow-x: hidden.
It will make the site non-scrollable horizontally and thus not readable in some mobile browsers. You can fix it by simply removing overflow-x: hidden from body in the same CSS file.


gtsopour’s picture

Assigned: Unassigned » skechagia
Priority: Normal » Critical
Issue tags: +SimpleCorp responsive Drupal theme, +SimpleCorp theme

Thanks redthd for your suggestion. We will review it and this change will be committed and included in new SimpleCorp 7.x-1.1.


prawln’s picture

Any time frame on when 7.x-1.1 will be released? Having the same issue as skechagia which is quite major.
Doesn't seem like his work arounds have worked for me though.

pameeela’s picture

Thanks @redthd, removing overflow-x: hidden fixed my iPhone issue. Is there any reason to keep this in? The site was not usable on iPhone with it because of the scroll problem. Fairly important fix for a responsive theme!

skechagia’s picture

Status: Needs review » Fixed

Hi redthd,

thank you for reporting this. Seems that background-attachment: fixed; is badly supported on mobile devices.
We reviewed your suggestions and we removed the property overflow-x: hidden from line 38 of simplecorp/css/main-css.css file. Also we disabled the background-attachment: fixed; for mobile devices by adding the body.custom-background { background-attachment: scroll;} to

  • simplecorp/css/768.css
  • simplecorp/css/480.css
  • simplecorp/css/320.css


So with these changes the background image will not have the fixed behavior on mobile devices or when browser width goes below 959px.

These changes are committed and will included in the next release - SimpleCorp 7.x-1.1.


Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

pheraph’s picture

Thanks for the fix!