CSS Background Image Repeat

CSS background-repeat

Theo mặc định thì thuộc tính background-image lặp đi lặp lại một hình ảnh cả theo chiều ngang và theo chiều dọc.

Một số hình ảnh sẽ chỉ được lặp đi lặp lại theo chiều ngang hoặc theo chiều dọc, hoặc chúng sẽ trông lạ lùng, như sau:

Ví dụ:

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

Nếu như hình ảnh ở trên chỉ được lặp đi lặp lại theo chiều ngang (background-repeat: repeat-x;), hình nền sẽ trông đẹp hơn:

Ví dụ:

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

Mẹo: Để lặp đi lặp lại một hình ảnh theo chiều dọc, chúng ta hãy thiết lập background-repeat: repeat-y;

CSS background-repeat: no-repeat

Việc hiển thị hình ảnh nền chỉ một lần duy nhất cũng được chỉ định bởi thuộc tính background-repeat:

Ví dụ sau sẽ hiển thị hình ảnh nền chỉ một lần duy nhất:

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

Trong ví dụ trên, hình ảnh nền được đặt ở cùng một vị trí với văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không làm nhiễu loạn quá nhiều đoạn văn bản.

CSS background-position

Thuộc tính background-position được sử dụng để chỉ định vị trí của hình ảnh nền.

Ví dụ sau sẽ đặt hình ảnh nền vào vị trí góc phải trên:

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