Login With Github

CSS Backgrounds

The CSS background property is used to define the background effect of HTML elements. We can set the background color or the background image in CSS.

The common CSS background properties are as follows:

  • background-color:to set the background color
  • background-image:to set the background image
  • background-repeat:to set the repeat mode of the background image
  • background-attachment:to set whether the background image scroll with the page
  • background-position:to set the position of the background image

Background-color

You can use the background-color property to set the background color for HTML elements.

The following CSS code is to set the background color of the <p> element to gray:

p {
    background-color: gray;
}

In CSS, color values can be specified in the following ways:

  • a valid color name - like "red"
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"

Background-color cannot be inherited, and its default value is transparent. If an element does not specify a background color, the background is transparent.

Background-image

The background-image property specifies an image for the element's background. The default value of the background-image property is none, which means no image is placed onto the background.

By default, the background image is repeatedly displayed so as to cover the entire element.

If you need to set a background image for an HTML element, you must set a URL value for the background-image property:

body {
    background-image: url(/i/eg_bg_04.gif);
}

Most background images are applied to body elements, but not limited to them.

A background image is applied to a paragraph in the following example, but the rest of the document doesn't apply background effects:

p.flower {
    background-image: url(/i/eg_bg_03.gif);
}

You can even set a background image for an inline element. We set a background image for a link in the following example :

a.radio {
    background-image: url(/i/eg_bg_07.gif);
}

Note: When you are applying a background image, you shouldn't make the image disturb the text in the element.

Background-repeat

You can use the background-repeat property to define how the background image is filled in the element. repeat-x indicates that the image is repeatedly filled in the horizontal direction, while repetition-y indicates that the image is repeatedly filled in the vertical direction, and no-repeat indicates that the image is not repeatedly filled in any direction.

When some background images are repeatedly filled horizontally and vertically, the background of the element may look very uncoordinated. For example:

body {
    background-image:url('gradient2.png');
}

However, if the background image is only filled horizontally, the page looks beautiful, for example:

body {
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
}

Background-position

We can use the background-position property to define the position of the background image in the element.

In the following example, the background image of the body element is centered:

body {
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
}

There are two types of the background-position property values:

  • Keywords: such as top, bottom, left, right, and center
  • Length value: such as 100px or 5cm

Keywords

The background-position keywords can appear in any order as long as there are no more than two keywords - one for the horizontal and the other for the vertical.

If you want the background image to appear only at the top left of the <p> element, you can define CSS code like this:

p {
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top left;
}

If you want the background image to be centered in the <p> element, you can define CSS code like this:

p {
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:center center;
}

It also can be written like this:

p {
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:center;
}

Length value

If the background-position property value is a length value, then you need to specify the x-direction offset value and y-direction offset value. The two values ​​need to be separated by space. For example, the background-position:12px 24px indicates that the x-direction offset value is 12px and the y-direction offset value is 24px. The following is a complete example:

body {
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
}

Fixed background image

If the document is long, the background image scrolls as the document scrolls down. So the image will disappears when the document scrolls over the image.

You can use the background-attachment property to prevent the background image from scrolling with the document. Thus you can set the background-attachment property to fixed:

body {
    background-image: url(/i/eg_bg_02.gif);
    background-repeat: no-repeat;
    background-attachment: fixed
}

CSS background - Shorthand property

In the above examples, we try a lot of CSS background properties to set the background of the HTML elements. To simplify the CSS code, we can combine these properties into one property, for example:

body {
    background:#ffffff url('img_tree.png') no-repeat right top;
}

When using the shorthand property, the order of the property values ​​is:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

If one of the property values ​​is missing, the rest of the property values ​​is still by this order.

0 Comment

temp