karenak Crown



Here's the Categorian Beginner's First Aid Kit - Part Two /b



The intricacies of background image sizing


This tutorial is about how to set the size of your background image so that it looks good on most monitors.


Why bother ?

As mentioned before and after, there is a lamentable variety of screen resolutions and of browsers in use, which mess up our beautiful blogs if not taken into consideration.

Just so you get an impression of how different a blog can look, here an example of my blog on 3 different screens:





mtbooke was so kind as to provide the left screenshot, which is from a 1024x768 monitor. The middle one is from my laptop (1440x900) and the right one is from my new monitor (1920x1080).



Now imagine what happens to your background photo, if you force it to cover the entire screen and it is displayed on three so widely different formats.

Basically there are two options.

- You can either stretch and distort it to fit or
- you can keep the proportion and decide which part can be cut off when it doesn't fit on the screen.









This tutorial will try to help you decide which method to use for your image of choice.




The basics are always the same

The page background image is defined in the body, right at the top of your style sheet:

body {
background-image: url( http://...path to the image... );
background-repeat: no-repeat;
background-attachment: fixed;
....}


The first line contains the path to the image
The second line determines that the image is displayed only once
The third prevents the image from scrolling with the rest of the blog

Please note all the brackets (or braces), colons and semicolons - they are important !


These 3 options are the basics. Without them the whole background image thing won't work.




Background Size and Position

The other two background properties are size and position.

background-size: percentage|cover;
background-position: top/bottom/left/right|px|percent
;


This means that there are several options to choose from:

percentage sets the height and width of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto".
background-size: 100% 100%;

cover scales the image keeping the proportion intact.
background-size: cover;

The position of the background image can be set in px or percentage or with top or bottom, left or right


Width and Height

As mentioned above, the first value is the width, the second the height. Let's have a look at the possible combinations:


  • 100% 100%
  • This will stretch both width and height until the entire background is covered, ignoring the aspect ratio. This is what caused the moon to become an elipse in the example above.


  • 100% auto
  • With this combination the image is scaled until the width covers the background. Aspect ratio remains intact, meaning that the image height will be cut off either top or bottom or both. This depends on what is selected for background-position.

    Please note: If the image is much wider than high, it is possible that there is not enough height to cover the background entirely.


  • auto 100%
  • This scales the image until the height covers the background. The proportions are kept but it may happen that the width gets too large and is cut off or may not be sufficient to cover the entire background and thus an empty strip remains.


  • auto
  • The image remains unchanged. This only works with really big images.


  • cover
  • Cover will scale the image until both width and height cover the background while keeping the aspect ratio. Thus there is always some part of the image that will be too big and therefore cut off.

    However, the big advantage is that the proportions are kept intact and there is never a strip of uncovered background.


Position

With background-position we "anchor" the image on the screen. For our purposes neither the exact px position nor the percentage is useful.

Instead we use left / center / right and top / center / bottom.

  • left top
  • This is the default value i.e. if you do not mention the background-position in your style sheet, the image will be anchored in the top left corner of the screen.

    Select this option if the important part of your image is in the top left corner. It will always be visible.

    Anchored like this, the right side and the bottom of the image may be cropped if the image becomes too large for the screen size. Alternatively, if set to "auto" and there's not enough image to fill the space, this is where the empty strips will appear.


  • center center
  • The image is anchored exactly in the middle of the screen. Thus it's the outer rim that may be cut off or empty strips may appear wherever the image doesn't reach the corners.


  • bottom right
  • With this selection it is always the bottom right corner of the image that will be visible. Top and left may be cut off or show the empty strips.



I'm sure I need not explain all the combinations - you get the drift.




Examples



background-size: 100% auto;
background-position: center center;







background-size: cover;
background-position: right center;







background-size: 100% auto;
background-position: right bottom;







Remember the handicapped

So, the final background code could look like this....


body {
background-image: url( http://...path to the image... );
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-position: right center; ...}



....if only there weren't those fellow bloggers among us who are handicapped by using Internet Explorer or an old version of Firefox, Opera, Safari and so on.

So, to make sure that really most people are able to see your beautiful background image, you better add the following lines:


body {
background-image: url( http://...path to the image... );
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
-o-background-size: 100% auto;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;

background-position: right center; ...}


Make sure that they all show the same values as the normal background-size.

Please note: If you use "cover" instead of percentage, you don't need those extra lines.




My special thanks go to Denis who very patiently took screenshots for me.


>>>> Part Three