# Background image in my 1 column foundation stack is jumping into view...why? **URL:** \ **Category:** RapidWeaver Classic\ **Created:** [January 2, 2018, 1:46pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871 "2018-01-02T13:46:59Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Gabrielle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gabrielle/32/183_2.png) [@Gabrielle](https://forums.realmacsoftware.com/u/Gabrielle)\ **Post date:** [January 2, 2018, 1:46pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/1 "2018-01-02T13:46:59Z")
Hi all, my test site is here (desktop view only): [http://stormtempweb.com/stormnew/2/print/](http://stormtempweb.com/stormnew/2/print/) For some reason the main blue background image which is utilised via the Foundation 1 column stack always loads large and then jumps into it’s correct size, is there any way I can avoid this ugly jump? ---
**Author:** ![webdeer](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/webdeer/32/5299_2.png) [@webdeer](https://forums.realmacsoftware.com/u/webdeer)\ **Post date:** [January 2, 2018, 1:59pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/2 "2018-01-02T13:59:11Z")
Your BG image is off the planet huge in kb - 3.4Mb and should be about 200k. Also all of the scene items are pretty big too. I suspect that the images came from a scene creator pack and are all 300dpi. If so change to 72dpi and optimise jpgs in JpegMini or PNGs in ImageOptim. PS you can use XnConvert to change dpi. PPS There is no need for the BG image to be a PNG so convert it to jpg and save loads of kbs. ---
**Author:** ![Gabrielle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gabrielle/32/183_2.png) [@Gabrielle](https://forums.realmacsoftware.com/u/Gabrielle)\ **Post date:** [January 2, 2018, 2:06pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/3 "2018-01-02T14:06:26Z")
Ah yes I haven’t optimized anything yet as I’ve just been working on the layout and design. I’ll optimize to see if that helps. What is the optimum width would you say for a full background image to still look sharp on all screens? Currently I use 1500px width but is that too big? ---
**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\ **Post date:** [January 2, 2018, 2:09pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/4 "2018-01-02T14:09:26Z")
I’m on my iPad right now, and it appears to be to wide for that screen size. I can scroll left and right. ---
**Author:** ![webdeer](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/webdeer/32/5299_2.png) [@webdeer](https://forums.realmacsoftware.com/u/webdeer)\ **Post date:** [January 2, 2018, 2:19pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/5 "2018-01-02T14:19:10Z")
I use 2560px wide bg image because it is reasonable to assume that a user with a (now common) 2560 size screen will view it at full screen. If the image cannot be optimised below about 250kb, then I choose a different image. ---
**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\ **Post date:** [January 2, 2018, 2:50pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/6 "2018-01-02T14:50:30Z")
Very few people browse in full screen. Most frameworks like bootstrap 4, or foundations 6 still set a maximum width for usable content. The default container max-width for bootstrap 4 is 1200px for the XL screen size. The Jumbotron or hero page can be larger, but since the real content tends to be capped, most folks use the extra screen real estate for having additional windows open. Jumbotron’s and hero background images are usually just that a background so it’s a judgment call on speed vs. image quality. A large sharp image may be great for the person using a large retina in full screen, but it’s going to slow everyone’s loading. Some resources for screen sizes and browser sizes: > **[Screen Resolution Stats Worldwide | Statcounter Global Stats](https://gs.statcounter.com/screen-resolution-stats)** > > This graph shows the stats of screen resolutions worldwide based on over 5 billion monthly page views. > **[Screen Resolution ≠ Browser Window | CSS-Tricks](https://css-tricks.com/screen-resolution-notequalto-browser-window/)** > > The only statistic you get in most web analytics software is screen resolution. But there is a pretty good chance you just read this sentence in a browser that isn't open to the full size of your monitor. If you are looking at size analytics for you... ---
**Author:** ![Gabrielle](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gabrielle/32/183_2.png) [@Gabrielle](https://forums.realmacsoftware.com/u/Gabrielle)\ **Post date:** [January 2, 2018, 3:01pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/7 "2018-01-02T15:01:07Z")
wow that seems really big, I’ll give it a go though thanks Webdeer. ---
**Author:** ![webdeer](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/webdeer/32/5299_2.png) [@webdeer](https://forums.realmacsoftware.com/u/webdeer)\ **Post date:** [January 2, 2018, 3:07pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/8 "2018-01-02T15:07:46Z")
I think if you convert the PNG BG image to a jpg and then perhaps blur it a bit it will end up being much smaller. As it is a BG image it doesn’t really need to be sharp and images such as wood can often end up being too big because of all of the detail in the wood texture. Slightly blurring the BG image will also make the other images pop out of the screen a bit. ---
**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\ **Post date:** [January 8, 2018, 3:07pm UTC](https://forums.realmacsoftware.com/t/background-image-in-my-1-column-foundation-stack-is-jumping-into-view-why/17871/9 "2018-01-08T15:07:55Z")
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.