Marketo Landing Page Hero Image Sizing

Hey Jodi-

This has to do with using a background image rather than a foreground image. The job of the background image is usually to try and cover a section's background -- kinda like wallpaper on a wall. Generally it's a bad idea to use images that contain a "subject" (people, products, etc) and/or "words as part of the image" b/c there's a good chance that they'll get cropped off at the top/bottom or left/right depending upon the size of the browser (PC, tablet, mobile, etc) that you're viewing them on. 

In this situation, the background image is sized so that it "covers" the entire area at the top of the page (which is set to have a min-height of 410px). This also means that anything that doesn't exactly fit the ratio the agency gave you isn't going to display as expected on a different device that doesn't match those dimensions. In short - it's a poor choice for a way to go about setting up a background image (I can see the background green color show thru at some viewport ratios) as well as an issue with the image (in terms of having a subject and text baked into the image). Baking text into an image like this is generally avoided b/c there's a lot that you lose by not having the "live text" included in the page for a machine to read -- it'd be much better to use just the background image with the computers (maybe even anchor it to the right instead of the center so you'd always see the machines) and then layer the text on top of that using a <h1> tag for your main headline (so computers can better "read" the page; it'll boost your SEO; as well as make it accessible to folks who can't actually see the image there). 

The better way to go about this might be to add a "foreground" image into the editable area in your banner and get rid of all the background stuff. A foreground image (just a plain ol' image element) will not get cropped off at the sides b/c it's not set to "cover" the background area of its container. 

The issue in your case is that the template is coded in such a way that your banner image would be squeezed into a padded container (in the editable area where the text could go atop the banner) in the middle of that section and look weird b/c it was small, but not b/c it was cropped. From there you'd want to add a little CSS to the page (or better yet to the template) to modify that section for use with a foreground image if that's how you'd prefer to go about it.

It sounds like an ideal path forward here would be to have someone help add a new section to your template that was designed specifically for a use-case like this (eg a "Banner Image" section) where you could just plop in an image that went from edge-to-edge and not have to worry about the background stuff.

Alternately, you could break apart the image into just the clouds + computers and put "live text" atop the background image in the editable area. This would take a little more to setup, but compared to doing 100 laps thru Photoshop to get something to line up that never will, it's well worth the effort in the longrun.

If you can setup a clone of this page and just add the background image as an image element (foreground) into the editable area inside the banner section (where the text would normally go), I can help from there to dial up some quick CSS that you can at least add to this page to this one nailed down for the short-term win.

Here's a look at some HTML you can copy/paste into that editable area to get started:

 ^^ I notice here that you've got spaces in the file name "Hero - Hosted Services eBook Brightened 1440x410.png". It'd be best to remove the spaces or exchange them for a low-dash "Hero-Hosted_Services_eBook_Brightened_1440x410.png" and reload the image with the updated filename back into Marketo. You'll likely see a few weird things w/ spaces in the file name, especially w/ images.

Let me know if you've got any question on any of this - it's a pretty common situation that you're running into here and I think it's just a matter of making sure that the tool you've got works for/with your business process for putting pages together. If/when you're going to go the "subjects + text baked into an image" banner route, you'll definitely NOT want to use a background image since the height/width (proportions) are based on the size of the section rather than the size of the image. When you want to kind of separate it into layer w/ live text and even multiple layers of background images stacked up is where you'd want to use the background image feature.

Thanks,
Dave