{"id":18212,"date":"2019-11-12T10:14:39","date_gmt":"2019-11-12T15:14:39","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=18212"},"modified":"2020-10-27T18:10:15","modified_gmt":"2020-10-27T22:10:15","slug":"how-to-fix-background-image-resizing-problems","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-themes\/how-to-fix-background-image-resizing-problems\/","title":{"rendered":"How to Fix Background Image Resizing Problems"},"content":{"rendered":"\n

All browsers are not created equal and occasionally something will look correct on your Desktop PC but appear wildly different on your iPhone, especially in the case of background image resizing.<\/p>\n

This sometimes happens due to some of the problems that iOS mobile browsers have when a fixed background image position is combined with the cover-page background size.  The following custom CSS<\/a> code will remove the fixed position property for your website and section backgrounds when viewed on mobile devices, allowing the background images to resize correctly when your website is viewed on iOS mobile devices.<\/p>\n

    \n
  1. Navigate to Customize -> Advanced -> Custom JS & CSS<\/strong><\/li>\n
  2. Paste the following code into your Custom Theme CSS <\/strong>box<\/li>\n<\/ol>\n
    @media only screen \r\nand (max-device-height : 1024px) \r\nand (max-device-width : 1024px) {\r\n    .palette-primary.custom-background,\r\n    .boldgrid-section.background-fixed {\r\n        background-attachment: scroll !important;\r\n    }\r\n}<\/pre>\n
    Congratulations, you now know how to fix the display of your background images for iOS devices!<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
    All browsers are not created equal and occasionally something will look correct on your Desktop PC but appear wildly different on your iPhone, especially in the case of background image resizing. This sometimes happens due to some of the problems that iOS mobile browsers have when a fixed background image position is combined with the […]<\/p>\n","protected":false},"author":880,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Fix Background Image Resizing Problems","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[764],"tags":[],"class_list":["post-18212","post","type-post","status-publish","format-standard","hentry","category-boldgrid-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/880"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=18212"}],"version-history":[{"count":11,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18212\/revisions"}],"predecessor-version":[{"id":20454,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18212\/revisions\/20454"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=18212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=18212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=18212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}