[Học CSS] Bài 09: Làm việc với nền – background trong CSS

Làm việc với nền (background) là việc mà bạn sẽ thực hiện rất nhiều trong CSS. Như chọn màu nền, ảnh nền, cách hiển thị ảnh nền,… sau đây là nội dung chi tiết.

Các thuộc tính đối với nền – background trong CSS

  • background-color: màu nền;
  • background-image: link của ảnh nền;
  • background-position: vị trí của ảnh nền;
  • background-attachment: cuộn hình nền vùng chọn;
  • background-repeat: lặp lại của ảnh nền;

Màu nền (background-color)

Cái này là đơn giản nhất nè, để sử dụng thuộc tính màu nền cho vùng chọn chúng ta chỉ cần thêm đoạn CSS  background-color: tên màu / mã màu; vào vùng CSS như sau, chú ý mã màu mình sử dụng ở đây là màu xanh lá chuối (green):

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
            background-color: green;
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Nền là một hình ảnh (background-image)

Để đặt ảnh nền cho vùng chọn chúng ta chỉ cần sử dụng thuộc tính background-image và đặt vào đó đường dẫn đến link ảnh với cú pháp:  background-image: url(“URL ảnh”);

Chúng ta sử dụng lại ví dụ trên, thay cái màu nền ở ví dụ trên background-color: green; bằng đoạn background-image: url(“URL ảnh”);. Nhớ thay đoạn URL bằng ảnh tùy ý.

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
            background-image: url("https://hocban.vn/wp-content/uploads/2016/08/Hocban.vn-Hoc-WordPress-Blogspot.jpg");
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Vị trí của ảnh nền – (background-position)

Ở ví dụ trên thì nền của chúng ta nó nhỏ quá, bây giờ mình sẽ đặt ảnh nền cho cả trang luôn để các bạn dễ hình dung.

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            body {
            background-image: url("https://hocban.vn/wp-content/uploads/2016/08/Hocban.vn-Hoc-WordPress-Blogspot.jpg");
            }
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Sau khi xem thay đổi hình nền cho cả trang thì các bạn thấy nó rõ hơn rồi đúng không nào ? Và bây giờ chúng ta lại phát sinh một vấn đề, đó là ảnh nền nó chỉ có một góc thôi chứ không phải là toàn bộ ảnh. Như vậy phần hiển thị trên ảnh nền là khu vực mặc định là phía trên và bên trái của ảnh. Bây giờ chúng ta muốn nó hiển thị ở một góc ảnh khác thì có các lựa chọn sau:

Để áp dụng thử cho các bạn xem nhá, mình sẽ lấy vùng hiển thị là trung tâm của ảnh vừa rồi, vị trí center center như sau, bạn xem lại vừa rồi và cái này sẽ thấy hoàn toàn khác biệt, từ đó thay các giá trị tương ứng mà bạn thích.

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            body {
            background-image: url("https://hocban.vn/wp-content/uploads/2016/08/Hocban.vn-Hoc-WordPress-Blogspot.jpg");
            background-position: center center;
            }
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Lặp lại ảnh nền (background-repeat)

Thì khi mà bạn chọn một cái ảnh nền nó quá nhỏ hoặc vùng chọn của bạn có kích thước quá lớn, ví dụ như nền của website. Thì trong những trường hợp này, ảnh của chúng ta sẽ không đủ kích thước, do đó mặc định nó sẽ nhân bản cái ảnh nền của chúng ta ra nhiều ảnh nhỏ khác để lấp đầy nền phía sau. Chúng ta gọi nó là Repeat (lặp lại).

Để tắt cái repeat này chúng ta sẽ sử dụng giá trị no-repeat như sau, và nếu bạn xóa cái dòng background-repeat: no-repeat thì các bạn sẽ nhận thấy được mặc định nó là như thế nào nhé !

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            body {
            background-image: url("https://www.w3schools.com/css/w3css.gif");
            background-repeat: no-repeat;
            }
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Cuộn hình nền theo vùng chọn (background-attachment)

Khi bạn muốn hình nền của mình cuộn theo khi cuộn trang web hoặc để nó trôi theo văn bản khi cuộn thì chúng ta sẽ sử dụng thuộc tính background-attachment, nó có các giá trị như sau:

  • scroll: Hình nền chạy theo thanh cuộn (mặc định);
  • fixed: Hình nền cố định với khung nhìn, mình cuộn trang nhưng nó vẫn đứng yên;
  • local: Cuộn hình nền cùng với nội dung (cái này dịch ra vậy chứ mình cũng chưa dùng tới);

Để hình dung chúng ta thực hiện ví dụ sau. Thì mặc định nó sẽ sử dụng giá trị scroll, tức là khi cuộn trang thì hình nền nó cuộn theo nội dung. Nên mình sử dụng giá trị fixed để cái hình nền đứng yên và các bạn sẽ nhận thấy, thay 02 giá trị còn lại để xem sự thay đổi nhé ! (Lưu ý, để thực hiện được ví dụ này thì các bạn phải tạo ra một trang văn bản dài dài tí).

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            body {
            background-image: url("https://hocban.vn/wp-content/uploads/2016/08/Hocban.vn-Hoc-WordPress-Blogspot.jpg");
            background-position: center center;
            background-attachment: fixed;
            }
            h1 {
            color: red;                                                                   
            }
            p {
            font-size: 16px;
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
            Lorem ipsum dolor sit amet, consectetur 
        </p>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
            Lorem ipsum dolor sit amet, consectetur 
        </p>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
            Lorem ipsum dolor sit amet, consectetur 
        </p>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
            Lorem ipsum dolor sit amet, consectetur 
        </p>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
            Lorem ipsum dolor sit amet, consectetur 
        </p>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
            Lorem ipsum dolor sit amet, consectetur 
        </p>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
            Lorem ipsum dolor sit amet, consectetur 
        </p>
    </body>
</html>

Như vậy là chúng ta vừa tìm hiểu xong một số các định dạng đối với nền (background) trong CSS. Cái phần cuối cùng, chỗ giá trị scroll và local hiện tại mình chưa nhận được sự khác biệt, nếu bạn nào biết phần này rồi, có thể cho mình xin link hướng dẫn hoặc demo code trên Codepen nhé, thanks you !

Bài học trước đó và tiếp theo

4/5 - (1 vote)




Subscribe
Notify of
guest

1 Comment
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+