Front Page Image being cut off in Atmosphere Pro

[erickawatson]

I'm using the Atmosphere Pro theme for a website. My issue is that on Microsoft products, both in Explorer and Firefox browsers, the Front Page image is being cut off at the top and the bottom. You should be able to see almost all of the head of the subject in the photo and "Kimberly J. Garcia" in a script signature at the bottom of the image when viewing the page. On my Apple computer using Safari and Firefox browsers the image is not cut off and looks fine. The same is true on an iPad and iPhone. I created the image at the recommended size of 1600 x 1050. I have played around with making the image smaller, but it doesn't help.

I am at a loss as to why the image is being cut off in the first place and how to adjust the code in order that it can be viewed accurately across platforms and browsers.

Any help is greatly appreciated.

Thank you,
Ericka Watson

http://www.kimberlyjgarcia.com/

[WhiteleyDesigns]

Not sure if this is the best option as I'm not familiar with that theme but you could alter the CSS - something like this:

#front-page-1 .backstretch img {
  position: relative;
  width: 100%;
  height: auto;
  left: auto;
}

Give that a shot and see if it helps.

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[erickawatson]

Thank you for your response and trying to help, but I added this and it didn't change the outcome. The main image is still being cut off.

Any other ideas?

[erickawatson]

I am also having the same problem with another website I designed. The image is being cut off at the bottom on Microsoft products. Here is the URL for that website:

http://www.kwequine.com

It seems to be a problem with the Atmosphere Pro theme... Anyone else having this problem? I also had problems with the them blowing up my images on mobile devices in Widget Area 2.

[WhiteleyDesigns]

Sorry it didn't work - without looking at the source code it's tough to tell as it seems like the CSS applied to the image is dynamically added. It actually cuts off for me in Chrome as well. It may be worth reaching out to the theme developer to see if there is a fix for it.

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[burridge]

Atmosphere uses a script called Backstretch for the main page image, which basically resizes the image (and modifies its height/width ratio) based on the size of the screen/browser window. If you need very particular margins on the top and bottom, backstretch isn't a good option for your design - you'll want a different theme that uses a header image, or you can remove the front page image using the customizer and then manually code a background image in the header into the CSS file, which should behave normally (though the sizing will need to be set manually for smaller screens as well).

Also, you can't change any of the display settings for the image using CSS (at least not as far as I can figure out) - they're all set in a backstretch.js file that lives in your theme folder in your WordPress files.

Hope this helps!

Edit: I should also add that you can modify the js file to not crop at the top, which opens up some options (you can just have some excess space at the bottom of the image which will get cropped or not depending on the screen ratio. This is what I did for the site I'm working on right now, which is how I ended up diving into this whole Backstretch thing.

[Author]

Posts