Browsed by
Tag: calc

Background Images: Part 1 – Content Images as background.

Background Images: Part 1 – Content Images as background.

Backgrounds Title Header

To follow-on from my talk at ‘The Litmus Email Design Conference 2016’ (#litmuslive) I’ll be doing a series of blog posts covering background images. They’ll feature key design considerations, prevent time consuming frustrations, some simple code solutions and some additional ideas for things like progressive enhancement.

Increase your Design Opportunities.

Background Images in email have a mixed reputation. Depending on your experience and approach, they can be a pain to work with, and many people find them too time-consuming, add too much weight, and/or restrictive. If this is the case I think it stands to reason that designers and developers when time is precious can potentially do what they can to avoid using them.

But if you use them in the right way there can also be some real design benefits to using them over and above just being to add live-text over an image, such as:

  • Create impactful designs without using too many images.
  • Help to frame content and add extra texture and depth.
  • Increases your creative options
  • It opens the door to more emotional design.
  • Can enhance the user experience with minimal effort.

We now know that we have that we have to be very focussed with our content, and that we have literally seconds to make an impact, something like a background image could be a good tool to have, and use in the same way as websites do to draw your attention.

Because email rendering can be awkward, and support can be sketchy my ideal scenario is to use backgrounds that are layout images, so if the background or the image is not supported you aren’t losing any thing from your content. You’re then not relying on the background image to deliver a message.

However probably the most frustrating part of using background images. Is when you have to use content images as backgrounds. Especially if that is a full width header image.

Content Images as backgrounds.

So with this situation I always aim for the same result. And I think I have a simple method of achieving this. The key thing to remember is that, email doesn’t have to look the same everywhere. So in that transition between desktop and mobile, regardless of the image, I aim for my content to remain the same size/easily readable on mobile. Immediately you then have another victory over “burning” the content in to the image. It also provides me with a simple mindset, and solution to aim for that I can build upon with very little effort.

To start, the thing to remember is that background images can be fluid. This is roughly the code set-up I like to use.

core_code

I’ve then set-up my image, and added inside the VML <DIV> the content to go on top, and forced it in to the position I want, at the foot of the screen.
For this I have used a top padding of 180px, but you may prefer to use heights instead.

NOTE: As a side note for anything horizontal I have spacing <TD> because there is a glitch with Outlook 2013 where horizontal padding has a habit of not working inside the VML fallback.

desk_robot

GMAIL APP

(please note that since writing this, Gmail has started supporting ‘background-position’ and ‘background-size’ on gmail addresses)

At this point I would test it in the Gmail App. To see what kind of result I get. Because if it’s not right in there. There is little I can do about it.
Thankfully it works quite well, but if not, I would go back to the desktop and try to find a workaround. Perhaps by repositioning the text, etc…

(Not featured in this example, but when setting the content up, I will often to start by setting things up in 2 floating table columns, even if one is blank. This give me a column that will stack on gmail and i can sometimes use it to my advantage to position things and then re-control on other mobile platforms.)

I’ve also set the position as ‘background-position: center top;” which shows the central portion of the image. This is made easier because the key area of the content (Mr.Robot) is narrow. However as you can see with the other example (Silicon Valley). You’re really looking to choose the ideal portion from either left, center, or right of the image when it’s a “busier” image.

You can however as Remi Paramentier (@HTeuMeuLeu) said at the same conference target the gmail app, and apply ‘background-size: cover;’ in shorthand and gmail reponds to that. So that might be something you want to work with and try out.

gmail_app_position

CALC and the GMAIL APP

UPDATE: This is now probably more relevant when rendering in the Gmail Apps on a non-gmail address.

If you’re looking for more precise positioning, you can always use CALC inline to reposition the background, and then use a media query to reposition again on supported mobiles.
The support for CALC has been fine for myself, however I have some potential issues on older Android devices. Worth looking in to though especially if you have a right-hand side image like the one below.

The one thing to be wary of here, would be to consider your text positioning. If you were to put text to the left of the image, it would just move behind it. So keep your text, above or below.

calc

THE TRANSITION TO MOBILE

So as mentioned, I have a straight forward formula for mobile, and although there are other options. I tend to always immediately aim for 1 of 2 solutions.

Because I have a flat background colour applied behind the image, I simply allow the image to shrink down on mobile to see how it looks, and more often than not, the combination of the image shrinking down and the content remaining not at this point will force that background colour to appear from behind the image. I then used media queries (often padding) to force to the content on to the flat colour.

(if this doesn’t work for you you can always apply and flat colour behind the content using media queries and see how it works out)

The second thing I do here is once I have that version right. I then apply background-size: cover !important; as a media queries style to see how it looks when the image fills the space. This can be hit and miss, often depending on the amount of content. But it’s a easy thing to try, to give you a different result.

For the really awkward scenarios

If you get really stuck, there is one solution I have gone to in the past. But it does tend to leave you forcing the desktop on gmail, or targeting it with other gmail hacks. You can use media queries to:

  • turn off your background image
  • remove any fixed heights or padding from your content. Leaving just the content
  • Apply a flat background colour behind it.
  • Turn on a mobile version image of the background image.

So that’s it for the first part. It’s a basic premise. If you have anything you wanted to add, please feel free to let me know.

 

Next time around I’ll be looking more at the other part of my talk. Patterns, Enhancement considerations, and Layering of content.

 

You can access my slides from Litmus here

 

Kristian Robinson
@joon82