Web design Tutorials Lesson 4.( Part 6)

Background Images and Background Positions

You can set your backgrounds to be pictures, if you favor. The CSS property to use is background-image. For the worth, you specify the placement of your image. This goes between spherical brackets and when the word uniform resource locator. The image name is enclosed with quotation mark marks:

BODY

The same rules on image referencing you learned earlier apply here.The higher than code, therefore, references a picture within the same folder because the current online page. 

you may place your background pictures during a folder referred to as backgrounds. The code would then be:

BODY

The default for background pictures is for them to be perennial. for instance, if your background image is one hundred pixels by one hundred pixels this image are going to be derived till the entire of the screen is stuffed. This coating will look awful. The image below shows this:

he background image we have a tendency to used higher than was a two hundred by two hundred gradient. it's OK going from left to right (the X direction) however happening (in the Y direction) the coating appearance terrible!

To give you a lot of management of background coating, the CSS property background-repeat is employed. The property will take four values repeat-x, repeat-y and no-repeat For our gradient higher than, we wish it to solely tile from left to right, within the X direction. therefore we want repeat-x:

BODY

Our background would then appear as if this 

Which is way superior!Background Position

You can specify an edge for background pictures. For that the CSS property background-position is employed. This property takes the subsequent values:

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

But you'll be able to additionally use pixels with X and Y values. it is also potential to use a page proportion. As a sensible example, suppose you needed a emblem within the prime right of your page you may fuck like this:

BODY {

background-image: URL ('backgrounds logo brolly.gif');

background-position: prime right;

background-repeat: no-repeat;

}

The impact would be this:

Notice that we've used background-repeat with a price of no-repeat, otherwise we'd get a page filled with brollies!

Here area unit some samples of the opposite values you'll be able to use:

background-position: 300px 100px;

background-position: eightieth 0%;

With the pel values (px) the X direction comes initial followed by the Y direction is an area separates the 2. identical is true of the share values: X direction initial, then Y direction, an area because the setup.

Try them out for yourself. you will find the background pictures within the further files that came with this course, within the extra_files/backgrounds folder. (If you haven't got the additional the transfer location is here, below the heading internet style - New Course : transfer the additional Files required for this course (You do not would like the downloads for the previous course.)

In the next lesson, you will find out about image captions.