Video:Background image placement

Transcript:Background image placement

Today I'll show you how to change the placement of a background image for your web page.

Preparing to Adjust Background Images With CSS

Once you know how to insert a background image and background color using CSS you can use what you learn here to adjust the placement of a background image. However, positioning a background image is not supported by all browsers.

Adjusting Background Images with CSS

First open Notepad, or if you re using a Mac open simple text. I will open a previously saved css file that has my background image and color already on it. By default, the image is positioned in the top left corner of the screen. The background-image: position property allows you to change the default position and place the image anywhere on the screen.

In your css file, within the body, on the line after your last line, type background(dash)-position(colon):

The positioning system is a set of coordinates, the first number refers to the horizontal value from the left and the second number refers to the vertical value from the top. You can use values such as percentages of the browser window (50% 25%), or fixed units such as pixels or centimeters (2px 2px or 2cm 2m). You can also just use words such as top right, center center, center top, bottom left, bottom right, etc.

I will use percentages so my page will look the same on any computer. Background-position: 50% 10%

Save and close your CSS file. Open your web page in a browser to see if you need to adjust the placement of the background image any further.