Tidadigi Logo

CSS Background

Background CSS là vùng phía sau nội dung của một phần tử. Nó có thể là màu sắc, hình ảnh hoặc cả hai. Thuộc tính background cho phép bạn kiểm soát các khía cạnh này. Bao gồm màu sắc, hình ảnh, vị trí và lặp lại.

Bạn có thể thử các loại background khác nhau ở đây-

Example: Ví dụ này hiển thị cách sử dụng background CSS.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        body {
            background: lightblue url(
            "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png") 
            no-repeat center fixed;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body></body>
</html>
<!--Driver Code Ends-->

CSS Background Property

CSS Background là một thuộc tính rút gọn cho những thuộc tính sau:

Background PropertyDescription
background-colorXác định màu nền của một phần tử bằng tên màu, HEX hoặc giá trị RGB.
background-imageThêm một hoặc nhiều hình ảnh làm background của một phần tử.
background-repeatChỉ định cách hình nền nên được lặp lại như thế nào. Theo chiều ngang, chiều dọc hoặc không lặp lại.
background-attachmentKiểm soát hành vi cuộn của hình nền. Làm cho nó cố định hoặc cuộn cùng trang.
background-positionXác định vị trí ban đầu của hình nền bên trong phần tử.
background-originĐiều chỉnh vị trí của hình nền so với padding, border hoặc content box.
background-clipĐặt mức độ mở rộng của background (màu hoặc hình ảnh) trong một phần tử. Ví dụ: đến padding hoặc border.

Background color Property

Thuộc tính background-color property trong CSS đặt màu nền cho một phần tử. Nó có thể chấp nhận một tên màu (ví dụ: "red"), giá trị HEX (ví dụ: "#ff0000"), hoặc giá trị RGB (ví dụ: "rgb(255, 0, 0)").

Syntax:

body {
background-color:color name
}

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        h1 {
            background-color: blue;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Geeksforgeeks</h1>
</body>
</html>
<!--Driver Code Ends-->
  • background-color: Đặt màu nền của phần tử h1 thành màu xanh lam.
  • Màu sắc có thể được chỉ định bằng cách sử dụng:
    • Color name: (blue, green, etc.)
    • HEX code: (#5570f0, #ff5733, etc.)
    • RGB value: (rgb(255, 0, 0), rgb(0, 255, 0), etc.)

Background Image Property

Thuộc tính background-image trong CSS được sử dụng để đặt một hình ảnh làm background của một phần tử. Theo mặc định, hình ảnh được lặp lại để bao phủ toàn bộ phần tử trừ khi được chỉ định khác.

Syntax:

body {
background-image : link;
}

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        body {
            background-image:
                url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Geeksforgeeks</h1>
</body>
</html>
<!--Driver Code Ends-->
  • background-image: Đặt hình nền của phần tử body.
  • URL hình ảnh được cung cấp (https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png) được sử dụng làm background.
  • Theo mặc định, hình ảnh lặp lại để bao phủ toàn bộ background của body.

Background repeat Property

Thuộc tính background-repeat trong CSS chỉ định cách hình nền được lặp lại. Theo mặc định, hình ảnh lặp lại cả theo chiều ngang và chiều dọc. Bạn có thể kiểm soát việc lặp lại bằng cách chỉ định các giá trị như repeat-x, repeat-y hoặc no-repeat.

Syntax:

body {
background-image:link;
background-repeat: repeat:x;
}

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        body {
            background-image:
                url(
            "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
            background-repeat: repeat-x;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>"Hello world"</h1>
</body>
</html>
<!--Driver Code Ends-->
  • background-image: Hình ảnh (250.png) được sử dụng làm background của phần tử body.
  • background-repeat: repeat-x: Hình nền sẽ chỉ lặp lại theo chiều ngang dọc theo trục x.
  • Hình ảnh chỉ được lặp lại theo hướng ngang trong khi vẫn duy trì vị trí theo chiều dọc.

Background-attachment Property

Thuộc tính background-attachment trong CSS chỉ định cách hình nền hoạt động khi người dùng cuộn trang. Bằng cách đặt giá trị thành fixed, hình nền sẽ ở nguyên vị trí khi nội dung của trang cuộn.

Syntax:

body {
background-attachment: fixed;
}

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        body {
            background-image:
                url(
            "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
            background-attachment: fixed;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Geeksforgeeks</h1>
</body>
</html>
<!--Driver Code Ends-->
  • background-image: Hình ảnh (250.png) được đặt làm background của phần tử body.
  • background-attachment: fixed: Hình nền được cố định tại chỗ, có nghĩa là nó sẽ không cuộn cùng với nội dung của trang.
  • Khi bạn cuộn, hình nền vẫn tĩnh, mang lại hiệu ứng thị sai.

Background-position Property

Thuộc tính background-position property trong CSS được sử dụng để đặt vị trí bắt đầu của hình nền bên trong phần tử. Bạn có thể sử dụng các giá trị như top, left, center hoặc chỉ định các giá trị pixel/phần trăm chính xác để định vị hình ảnh.

Syntax:

body {
background-repeat:no repeat;
background-position:left top;
}

html 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        body {
            background-image:
                url(
            "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Geeksforgeeks</h1>
</body>
</html>
<!--Driver Code Ends-->
  • background-image: Hình ảnh (250.png) được đặt làm background của phần tử body.
  • background-repeat: no-repeat: Hình ảnh sẽ không lặp lại theo chiều ngang hoặc chiều dọc.
  • background-position: center: Hình nền được căn giữa bên trong phần tử body.

Last Updated : 21/07/2025