Pages

Wednesday, June 11, 2014

Background Image - no-Repeat and Horizontally or Vertically Set position


By default, the background-image CSS property repeats a picture each horizontally and vertically.
Some pictures ought to be recurrent solely horizontally or vertically, or they're going to look strange, like this:

body {
    background-image: url("gradient.png");
}

If the image is recurrent CSS solely horizontally (repeat-x), the background can look better:

body {
    background-image: url("gradient.png");
    background-repeat: repeat-x;
}

Showing the image just the once is fixed by the background-repeat property:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

In the CSS example higher than, the background image is shown within the same place because the text. we would like to vary the position of the image, so it doesn't disturb the CSS files an excessive amount of.The CSS position of the image is fixed by the background-position property:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

No comments:

Post a Comment