Title: Background Image Resizing
Last modified: April 16, 2020

---

# Background Image Resizing

 *  Resolved [khannamanu](https://wordpress.org/support/users/khannamanu/)
 * (@khannamanu)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/background-image-resizing/)
 * Hello,
 * We have built a ‘coming soon’ page using this plugin. First of all, great plugin
   so thank you for making it available for free.
 * For the most part, we have been able to tweak the positioning of the elements
   using custom CSS. However, the background image is not loading as intended.
 * **Problem 1:** The background image is getting resized to 1024×707. The dimensions
   of the uploaded image are 2500×1824. This is causing the image to look blurry
   on devices. What is the best way to address the issue?
 * **Problem 2:** On mobile devices we find that the background image is a bit too“
   tall” and would like to shorten the max-height it takes up on a mobile browser
   i.e. move the background image up by a certain amount so that it fits nicely 
   on an iPhone X screen or larger.
 * Appreciate any help you’re able to provide.
 * Thanks
    – Manu
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fbackground-image-resizing%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Ales](https://wordpress.org/support/users/alesmal/)
 * (@alesmal)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/background-image-resizing/#post-12682229)
 * Hello [@khannamanu](https://wordpress.org/support/users/khannamanu/), thanks 
   for reaching out!
 * **Problem 1**: Plugin loads ‘large’ image size on mobile devices, to load bigger
   image, please got Settings > Media and change the size of large images
 * > [View post on imgur.com](https://imgur.com/a/jqVgeED)
 * **Problem 2**: Background image is positioned absolutely and stretched to device
   viewport, you can use custom CSS to move it as you like:
 * Change top or bottom values to move the image up or down
 *     ```
       #background-wrapper {
          top: 0px;
          bottom: 0px;
       }
       ```
   
 * You might need to add a background to body as it’s currently white:
 *     ```
       body {
         background-color: black;
       }
       ```
   
 * Hope that helps, Ales
 *  Thread Starter [khannamanu](https://wordpress.org/support/users/khannamanu/)
 * (@khannamanu)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/background-image-resizing/#post-12711941)
 * Thanks for the quick response, Ales.
 * Problem 1: It looks like the media settings in WordPress are already set to ‘
   Large’. We implemented the solution recommended on [this post](https://wordpress.org/support/topic/content-box-size-css/)
   and this has improved the quality of the background image on desktop but we continue
   to get a blurry image on iPad and Mobile. Can you test on your mobile device 
   and check it out as well pls?
 * Problem 2: We tried your recommended fix but didn’t implement it because of the
   white background it showed when the image was moved. Since our background image
   has a gradient on it, even changing it to a black background didn’t work too 
   well. The goal was to simply shift the viewport to another section of the image(
   since the image is much larger than what the viewport is actually showing). Not
   sure if that makes sense but the idea is to have the copyright footer show up
   below the glow in the background image and also eliminate the vertical scroll
   on mobile.
 * Appreciate the help.
 *  Plugin Author [Ales](https://wordpress.org/support/users/alesmal/)
 * (@alesmal)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/background-image-resizing/#post-12712354)
 * Howdy [@khannamanu](https://wordpress.org/support/users/khannamanu/),
 * You have to actually change the numbers in the large thumbnail, try changing 
   the values from 1024 to something like 1500 or so.
 * Re second problem, I get you, but that’s not quite possible unfortunately.
    But
   it looks OK to me on my device:
 * > [View post on imgur.com](https://imgur.com/a/X9osgo1)
 * Btw next plugin update will bring possibility to upload custom image for a mobile
   devices, which might resolve both of your issues.
 * Ales
 *  Plugin Author [Ales](https://wordpress.org/support/users/alesmal/)
 * (@alesmal)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/background-image-resizing/#post-12725969)
 * With new plugin update you can use a special image just for mobile devices now.
 * Cheers Ales
 *  Thread Starter [khannamanu](https://wordpress.org/support/users/khannamanu/)
 * (@khannamanu)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/background-image-resizing/#post-12819108)
 * Thank you for fixing this! The option to add a mobile-specific image is very 
   helpful.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Background Image Resizing’ is closed to new replies.

 * ![](https://ps.w.org/cmp-coming-soon-maintenance/assets/icon-256x256.png?rev=
   2393184)
 * [CMP - Coming Soon & Maintenance Plugin by NiteoThemes](https://wordpress.org/plugins/cmp-coming-soon-maintenance/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cmp-coming-soon-maintenance/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cmp-coming-soon-maintenance/)
 * [Active Topics](https://wordpress.org/support/plugin/cmp-coming-soon-maintenance/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cmp-coming-soon-maintenance/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cmp-coming-soon-maintenance/reviews/)

## Tags

 * ["background-image"](https://wordpress.org/support/topic-tag/background-image/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 5 replies
 * 2 participants
 * Last reply from: [khannamanu](https://wordpress.org/support/users/khannamanu/)
 * Last activity: [6 years, 1 month ago](https://wordpress.org/support/topic/background-image-resizing/#post-12819108)
 * Status: resolved