Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
7th February 2012

Take control of your backgrounds with CSS3

CSS3 offers designers more flexibility with background images. Here we take a look at some of the key properties

Take control of your backgrounds with CSS3

Take control of your backgrounds with CSS3

CSS3 offers designers more flexibility with background images. Here we take a look at some of the key properties

Background images have played a key role in web design for as long as CSS has been popular, and support has been available. They are the aesthetic that creates the persona of a page. The big issue with background images is their lack of flexibility. They can repeat – perfect for textures, and they can be fixed to stay in place on screen but they cannot be resized. This means that developers who want a beautiful full-screen canvas, or simply more flexibility, have to improvise with absolute positioned tags, image sizes or code.
The background-size property, part of the CSS3 Backgrounds and Borders module, grants designers far more scope to be creative and with cleaner code. And, with support for multiple backgrounds by its side, this tasty duo is set to finally give web designers a chance to make the most of their backdrops.

This article was originally featured in Web Designer issue 190, authored by Steve Jenkins. There are no project files required for this tutorial.

01 Default value

Take control of your backgrounds with CSS3

The default value for the background-size property is auto. This displays the background image at its original size, eg 1,000 x 700px. The background-size property works in tandem with the background property so if the image is set to no-repeat only one instance will appear; on the other hand, if set to repeat it will do just that.

02 Specific size

Take control of your backgrounds with CSS3

An alternative to the auto option is a specific set of dimensions, eg 500 x 350px. The first value refers to the width of the image while the second refers to the height. Again, the repeat property helps to determine how the background appears.

03 Auto values
Background-size allows for the combination of specific sizes and the auto option. If the first value (width) is set to 500px and the second value to auto, the height will be automatically reduced proportionately to the width. This keeps the image’s original aspect ratio. If only the first value is added it is assumed that the second is auto.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: 500px auto;
004 }

04 Auto width
Adding the auto value first changes the perspective of an image. The first value (width) will now be determined by the second value (the height). The height will become the static value and the height will be automatically reduced/increased proportionately to the width, again keeping the aspect ratio.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px; 
004 }

05 Percentages
To add more flexibility to the size of a background image the values can be added as percentages. Adding a percentage as the first value, eg 50%, determines that the width will be 50% of the screen or 50% of the containing div tag. The second value (height) will be set to auto and its size will be kept in proportion.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px;}

Pages: 1 2 3 4

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • https://www.maground.com/Maground/home.htm Automotive Cgi

      Any object can be generated digitally. CGI is used very often in automotive advertising. Landscapes / CGI Backplates are often used for CGI Backgrounds. The mixture of real backgrounds and CG vehicles intensifies the impression of reality.

      automotive cgi

    • http://auccool.com Web and Mobile Design and Development

      The backgrounds are really essential for web and mobile design. The most important point is to choose the right colors and position.

    • Pingback: Style your website backgrounds – give it that more polished look « Adobe Help

    • Mag Round

      Browse our huge collection of automotive cgi backgrounds and harvest the perfect images and HDR domes for your advertising.