Added: 20 February, 2008
Group: CSS
How to position background image using CSS
Author: Alex
page: 1

How to position background image using CSS

This simple tutorial will explain basic elements of styling and positioning the web page backgrounds.


One of most important parts of designing your webapges are backgrounds. All background can be designed and managed with simple CSS code.

If you want to use one, solid color as your background just use background-color CSS element:

background-color: #ff0000;


This one line of CSS code will create background with #ff0000 color.

The other thing you might do with your web page is to create background with image. If you use this code line in your layout CSS file:

background-image:url('background.jpg');


the browser will use background.jpg image for background of that page.

Now, you can play with aligning and positioning the background images.
Cascade style sheet uses following elements for background styling:

background-repeat: repeat;


this value will repeat image both horizontally and vertically,

background-repeat: repeat-y;


the image will only be tiled vertically,

background-repeat: repeat-x;


the image will only be tiled horizontally,

background-repeat: no-repeat;


and obviously with no-repeat; value image won't be repeated.

background-attachment:fixed;


fixed value will glue the background image on current position and that can be interpreted as 'scroll' by some browsers. It is recommended that browsers interpret 'fixed' correctly, at least for the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'.

background-position:center;


the background image will be centered,

background-position: 14% 84%;


With using percentage you can specify where the background image will be. With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

background-position: 50px 100px;


And lastly with specific positioning in pixels, you can place your background image on exact part of web page design.

Also, CSS allow that all background styling can be written in one code line, so combining examples mentioned above can be:

background: #ff0000 url('background.jpg') no-repeat top left;
background: #ff0000 url('background.jpg') no-repeat bottom right;
background: #ff0000 url('background.jpg') no-repeat fixed center;



GO to: Page 1 : How to position background image using CSS


TechTut.com This tutorial is copyrighted. Partial duplication or full duplication is prohibited and illegal. Translation or usage of any kind without authorís permission is illegal.
  • Photo retouch add makeup and create clear face in Photoshop
  • Create low poly house
  • Setting up FTP in windows XP
  • Creating a Flash Photo Slideshow Tutorial
  • Create shadow in Photoshop
  • Drop-Down Menu Tutorial
  • Learn how to create pool in 3D studio
  • Create a realistic chrome car rims
Join our RSS feed
Use our RSS feed to get the latest published tutorials directly to your news reader.
Add to Google
Best tutorials for maya 3d max photoshop and more