#background-size

I’ve been working with a lot of SVG images lately, and I’ve noticed I often have to always refer back to MDN’s preserveAspectRatio page all the time. Their website is an amazing resource (can't wait to see W3Schools be removed from top search result spot whenever looking for this kind of reference), however I'm a more visual person and always get confused as to how this attribute can sometimes behave.

I've created a list showing the various behaviours of the preserveAspectRatio attribute as used in SVGs with a viewBox set. This SVG is then applied to an element as a background image, with further customisation enabled to show the variations. You can toggle the element size, background position, and change the type of background-size behaviour applied. Check it out below:

See the Pen Playing with SVG's preserveAspectRatio attribute by Matt Scheurich (@lvl99) on CodePen.

Adding Background Images To Ionic Framework Apps

I started working on an app and decided it was time to step up my design game.  Usually my apps suffer from looking plain or dated even though they have some insanely awesome functionality (ex: OTP Safe).  However, after looking at many other apps, I came to the conclusion that an app can look more attractive just by including a logo or some other kind of branding images.

The tricky part here is,…

jquery.backgroundSize.js

So one thing I really like is backgrounds images that fill the whole viewpoint and then resize as you resize the browser window. This effect use to be hard to do having to use Flash or a lot of Javascript. Not any more with the CSS 3 on the horizon you can now do it using just 1 attribute ( or 4 because at current all browsers have there own version of CSS 3 attributes ). The new attribute called background-size allows you to tell the browser how to manage the background images size. The three options for the full viewpoint background that resize with the browser are.

html { background: #FC0 url('background-image.jpg') no-repeat center center fixed; /* * CSS Background Size */ /* Cover */ background-size: cover; /* Contain */ background-size: contain; /* 100% */ background-size: 100% 100%; }

Contain

Fills the viewpoint making sure the whole image stays in view and stretching the image proportional. So if the user has the view point set in a different aspect ratio to the background image you will see the background come through as bars on the top and bottom or both sides. Imagine setting your background to black and then creating a widescreen (16:9) image and view it with the view point set to 4:3. The result would be similar to watching a widescreen movie on a non-widescreen TV you would get black bar.

Example : http://labs.dotmh.com/examples/CSS3/Background/contain.html

Cover 

This has a similar effect to contain but this time the image fills the whole background using the shortest size. This time instead of seeing the background colour come through the image is cropped to the viewpoint , this only happens when the view point is a different aspect ratio to the image. 

Example : http://labs.dotmh.com/examples/CSS3/Background/cover.html

100% 100%

This fills the entire viewpoint , ignoring aspect ratio i.e. non-proportional. So if the browsers viewpoint is of a different aspect ratio to the image then the image would appeared stretched. 

Example : http://labs.dotmh.com/examples/CSS3/Background/100percent.html