Using Background with CSS

CSS is a style commands technology called Cascading Stylesheet or Layered Page Styles that support HTML. It allows you to format properties by adding tags to objects within HTML.

Background comes to mind immediately comes to the field that makes up the ground of our site, but the background feature only on the ground, for example, the following areas backgorund can shape our page.

BODY { background: white url(https://www.safirmedya.com/images/syl.jpg) }
BLOCKQUOTE { background: #ffcc66 }
P    { background: url(https://www.safirmedya.com/../images/zemin.gif) #f5f5f5 fixed }
TABLE { background: #0c0 url(arkaplan.png) no-repeat bottom right }

So what are the features of this backround, what can we do with them, how can we shape our background?

There are 5 basic methods.

background-color
background-image
background-repeat
background-attachment
background-position

With Background-color, we assign a color to the floor. This color can be rgb, hex, color name or transparent. Its use is as follows;

Page.bg1 {background-color: # 000000; color: #FFFFFF; / * ground color black, text color white * /}

Background-image can have two values: None or url of an image.

<strong Background line-height: 1.6em ”=:-> Background-image

For example;

Page.bg2 {background-image: url (images / bgresim.gif)}

Repeat values ​​for repeat are repeat, repeat-x, repeat-y, and no-repeat. So what does it repeat and what it does with 4 methods. Repeat keeps your image constant or repeats it to the left or right, making it slippage or skidding. Although it is usually used for no-repeat feature, it may be useful to know its other features.

Background-repeat

a) Repeat: Allows your background to scroll horizontally and vertically.

b) Repeat-x: Allows vertical shift of your background.

c) Repeat-y: Allows you to shift your background horizontally.

d) No-repeat: Keep your background from sliding.

Sometimes we want an image to remain fixed in the background, so no-repeat provides it.

Background-attachment

It takes two values. Scroll and fixed. The use is as follows.

BODY {background: url (bgresim.gif); background-attachment: fixed}

TD.bg1 {background-position: bottom right} The background-attachment feature allows you to shift your background image to your workspace or to cover the workspace.

Background-position

This feature allows you to place your background as you wish. The values ​​you can get are length, percentage, top, center, bottom, left, right.

For example, if we want to have a table, and we want to place a background image in a cell of it, but the image is small we will put this image. We want to lean to the bottom right corner then we will do the image as follows;

TD.bg1 {background-position: 100% 100%} or in

The easiest way to assign a background position is with the following keywords: If you need to explain this in more detail, we can add the following. The background-position property determines the starting position for the background image. This feature is only applicable to block level elements and modified elements. (HTML modified elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT)

To adjust the horizontal position (left, center, right)

Adjust vertical position (top, center, bottom)

It can also be used in percentages and lengths to adjust the position of the background image. The lengths in percent are relative to the size of the element. Although lengths are allowed, their use is not recommended due to the weaknesses in different screen resolutions.

When using percentages or lengths, the horizontal position is specified first, and then the vertical position is determined. A value such as 20% 65% means 20% horizontal 65% vertical position. Similarly, a value of 5px 10px indicates a position 10 pixels lower than 5 pixels right.

If the value is given only for the horizontal position, the value for the vertical position is given as 50% by default. The combination of length and percentage values ​​in pixels is allowed. However, percentages and values ​​in pixels cannot be combined with keywords.

Keywords are interpreted as follows:

* top left = left top = 0% 0%
* top = top center = center top = 50% 0%
* right top = top right = 100% 0%
* left = left center = center left = 0% 50%
* Center = Center Center = 50% 50%
* right = right center = center right = 100% 50%
* bottom left = left bottom = 0% 100%
* bottom = bottom center = 50%
* bottom right = right bottom = 100%

The "background" feature can also be used during design, which is better supported than the background-position.