{"id":314,"date":"2013-09-09T10:08:00","date_gmt":"2013-09-09T10:08:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/09\/09\/9-cach-su-dung-background-trong-css\/"},"modified":"2022-08-20T16:21:53","modified_gmt":"2022-08-20T09:21:53","slug":"background-trong-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/background-trong-css\/","title":{"rendered":"9 c\u00e1ch s\u1eed d\u1ee5ng background (n\u1ec1n) trong CSS"},"content":{"rendered":"\n<p><strong>Background<\/strong>&nbsp;l\u00e0 thu\u1ed9c t\u00ednh quan tr\u1ecdng trong CSS, n\u00f3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o n\u1ec1n cho c\u00e1c th\u1ebb m\u00e0 d\u1ec5 th\u1ea5y nh\u1ea5t l\u00e0 th\u1ebb body. N\u1ec1n c\u00f3 hai ki\u1ec3u: n\u1ec1n m\u00e0u v\u00e0 n\u1ec1n d\u00f9ng \u1ea3nh.<\/p>\n\n\n\n<p>N\u1ec1n m\u00e0u l\u00e0 c\u00e1ch d\u00f9ng n\u1ec1n ph\u1ed5 bi\u1ebfn h\u01a1n c\u1ea3, h\u1ea7u h\u1ebft c\u00e1c trang web \u0111\u1ec1u s\u1eed d\u1ee5ng n\u1ec1n cho to\u00e0n trang l\u00e0 m\u00e0u \u0111\u01a1n s\u1eafc n\u00e0o \u0111\u00f3 c\u00f3 khuynh h\u01b0\u1edbng g\u1ea7n v\u1edbi m\u00e0u tr\u1eafng, n\u1ec1u m\u00e0u cho c\u00e1c ph\u1ea7n kh\u00e1c c\u1ee7a trang th\u00ec \u0111a d\u1ea1ng h\u01a1n. <\/p>\n\n\n\n<p>C\u00f3 m\u1ed9t s\u1ed1 thu\u1ed9c t\u00ednh c\u1ee7a background ch\u1ec9 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong CSS3. C\u00f2n d\u01b0\u1edbi \u0111\u00e2y l\u00e0 danh s\u00e1ch c\u00e1c thu\u1ed9c t\u00ednh ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u trong ng\u00e0y h\u00f4m nay:<\/p>\n\n\n\n<ol><li><code>background-color<\/code>;<\/li><li><code>background-image<\/code>;<\/li><li><code>background-repeat<\/code>;<\/li><li><code>background-position<\/code>;<\/li><li><code>background-attachment<\/code>;<\/li><li><code>background-size<\/code>;<\/li><li><code>background-clip<\/code>;<\/li><li><code>background-origin<\/code>;<\/li><li>vi\u1ebft t\u1eaft trong background;<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d73083336\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d73083336\"  type=\"checkbox\" id=\"item-6577d73083336\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-color\" title=\"Thu\u1ed9c t\u00ednh background-color\">Thu\u1ed9c t\u00ednh background-color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-image\" title=\"Thu\u1ed9c t\u00ednh background-image\">Thu\u1ed9c t\u00ednh background-image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-repeat\" title=\"Thu\u1ed9c t\u00ednh background-repeat\">Thu\u1ed9c t\u00ednh background-repeat<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-attachment\" title=\"Thu\u1ed9c t\u00ednh&nbsp;background-attachment\">Thu\u1ed9c t\u00ednh&nbsp;background-attachment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-position\" title=\"Thu\u1ed9c t\u00ednh background-position\">Thu\u1ed9c t\u00ednh background-position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-size\" title=\"Thu\u1ed9c t\u00ednh background-size\">Thu\u1ed9c t\u00ednh background-size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-clip\" title=\"Thu\u1ed9c t\u00ednh background-clip\">Thu\u1ed9c t\u00ednh background-clip<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Thuoc_tinh_background-origin\" title=\"Thu\u1ed9c t\u00ednh background-origin\">Thu\u1ed9c t\u00ednh background-origin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kiencang.net\/background-trong-css\/#Viet_tat_khi_dung_Background\" title=\"Vi\u1ebft t\u1eaft khi d\u00f9ng Background\">Vi\u1ebft t\u1eaft khi d\u00f9ng Background<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-color\"><\/span>Thu\u1ed9c t\u00ednh background-color<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1ch d\u00f9ng n\u1ec1n m\u00e0u kh\u00e1 \u0111\u01a1n gi\u1ea3n, ch\u1eb3ng h\u1ea1n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {background-color:#FF7357;}<\/code><\/pre>\n\n\n\n<p>ho\u1eb7c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h3 {background-color:#2E58FF;}<\/code><\/pre>\n\n\n\n<p>C\u00f2n b\u00e2y gi\u1edd b\u1ea1n s\u1ebd th\u1ea5y k\u1ebft qu\u1ea3 khi \u00e1p d\u1ee5ng \u0111o\u1ea1n code tr\u00ean cho th\u1ebb h3:<\/p>\n\n\n\n<h3 style=\"background-color:blue; color:#ffffff;\">T\u00f4i t\u1ea1o n\u1ec1n cho th\u1ebb h3 n\u00e0y c\u00f3 m\u00e0u xanh<\/h3>\n\n\n\n<p>Nh\u01b0 v\u1eady l\u00e0 b\u1ea1n \u0111\u00e3 k\u1ebft th\u00fac v\u1edbi c\u00e1ch d\u00f9ng m\u00e0u n\u1ec1n! C\u00f2n nh\u1eefng 4 thu\u1ed9c t\u00ednh background kh\u00e1c nh\u01b0ng t\u1ea5t c\u1ea3 \u0111\u1ec1u li\u00ean quan \u0111\u1ebfn s\u1eed d\u1ee5ng n\u1ec1n l\u00e0 \u1ea3nh. <\/p>\n\n\n\n<p>N\u1ec1n \u1ea3nh th\u01b0\u1eddng t\u1ea1o cho trang m\u1ee9c \u0111\u1ed9 c\u00e1 t\u00ednh n\u00e0o \u0111\u00f3. C\u00e1c trang thi\u00ean v\u1ec1 m\u1ef9 thu\u1eadt ho\u1eb7c mu\u1ed1n t\u1ea1o \u1ea5n t\u01b0\u1ee3ng n\u00ean d\u00f9ng thu\u1ed9c t\u00ednh n\u00e0y. N\u1ebfu trang web c\u00f3 l\u01b0\u1ee3ng truy c\u1eadp nhi\u1ec1u, d\u00f9ng n\u1ec1n \u1ea3nh k\u00edch c\u1ee1 l\u1edbn c\u1ea7n ph\u1ea3i c\u00e2n nh\u1eafc.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-image\"><\/span>Thu\u1ed9c t\u00ednh background-image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u1ebfu mu\u1ed1n s\u1eed d\u1ee5ng n\u1ec1n l\u00e0 \u1ea3nh b\u1ea1n khai b\u00e1o nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {background-image: url('duong-dan-anh.jpg');}<\/code><\/pre>\n\n\n\n<p>Theo m\u1eb7c \u0111\u1ecbnh n\u1ebfu \u1ea3nh nh\u1ecf h\u01a1n n\u1ec1n th\u00ec n\u00f3 s\u1ebd l\u1eb7p l\u1ea1i (<em>repeat<\/em>) theo c\u1ea3 hai chi\u1ec1u cho \u0111\u1ebfn khi l\u1ea5p \u0111\u1ea7y n\u1ec1n th\u00ec th\u00f4i. <\/p>\n\n\n\n<p>Trong ph\u1ea7n khai b\u00e1o URL b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng \u0111\u1ecba ch\u1ec9 \u1ea3nh t\u1eeb trang c\u1ee7a b\u1ea1n ho\u1eb7c b\u1ea5t k\u1ef3 \u0111\u1ecba ch\u1ec9 \u1ea3nh n\u00e0o tr\u00ean m\u1ea1ng. <\/p>\n\n\n\n<p>Gi\u1edd t\u00f4i s\u1ebd ti\u1ebfn h\u00e0nh t\u1ea1o \u1ea3nh n\u1ec1n cho th\u1ebb div, c\u00e1i th\u1ee9 nh\u1ea5t l\u00e0 \u1ea3nh to b\u1eb1ng v\u1edbi n\u1ec1n, c\u00e1i th\u1ee9 hai th\u00ec \u1ea3nh nh\u1ecf h\u01a1n n\u1ec1n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background.jpg'); color: white; font-size: 40px; height: 300px; width: 400px;\"&gt;\u1ea2nh to b\u1eb1ng n\u1ec1n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background.jpg'); color: white; font-size: 40px; height: 300px; width: 90%;\">\u1ea2nh to b\u1eb1ng n\u1ec1n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>\u1ea2nh n\u1ec1n nh\u1ecf, code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg'); color: white; font-size: 40px; height: 300px; width: 400px;\"&gt;\u1ea2nh nh\u1ecf h\u01a1n n\u1ec1n n\u00ean n\u00f3 \u0111\u01b0\u1ee3c l\u1eb7p l\u1ea1i \u0111\u1ec3 bao ph\u1ee7 h\u1ebft n\u1ec1n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg'); color: white; font-size: 40px; height: 300px; width: 90%;\">\u1ea2nh nh\u1ecf h\u01a1n n\u1ec1n n\u00ean n\u00f3 \u0111\u01b0\u1ee3c l\u1eb7p l\u1ea1i \u0111\u1ec3 bao ph\u1ee7 h\u1ebft n\u1ec1n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-repeat\"><\/span>Thu\u1ed9c t\u00ednh background-repeat<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1i n\u00e0y chuy\u00ean d\u00f9ng cho nh\u1eefng \u1ea3nh nh\u1ecf h\u01a1n n\u1ec1n, nh\u01b0 v\u00ed d\u1ee5 tr\u00ean b\u1ea1n \u0111\u00e3 th\u1ea5y, khi \u1ea3nh nh\u1ecf h\u01a1n n\u1ec1n th\u00ec theo m\u1eb7c \u0111\u1ecbnh n\u00f3 s\u1ebd l\u1eb7p l\u1ea1i \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y kho\u1ea3ng kh\u00f4ng c\u1ee7a background th\u00ec m\u1edbi th\u00f4i, b\u1ea1n c\u00f3 quy\u1ec1n ch\u1ec9 \u0111\u1ecbnh c\u00e1ch l\u1eadp l\u1ea1i ch\u1ec9 theo chi\u1ec1u nh\u1ea5t \u0111\u1ecbnh n\u00e0o \u0111\u00f3.<\/p>\n\n\n\n<ul><li>N\u1ebfu ch\u1ec9 cho ph\u00e9p l\u1eb7p l\u1ea1i theo chi\u1ec1u ngang th\u00ec vi\u1ebft:&nbsp;<code>background-repeat: repeat-x;<\/code><\/li><li>N\u1ebfu ch\u1ec9 cho ph\u00e9p l\u1eb7p l\u1ea1i theo chi\u1ec1u d\u1ecdc th\u00ec vi\u1ebft:&nbsp;<code>background-repeat: repeat-y;<\/code><\/li><li>N\u1ebfu b\u1ea1n kh\u00f4ng mu\u1ed1n \u1ea3nh n\u1ec1n l\u1eb7p l\u1ea1i d\u00f9 n\u00f3 c\u00f3 nh\u1ecf h\u01a1n n\u1ec1n th\u00ec vi\u1ebft:&nbsp;<code>background-repeat: no-repeat;<\/code><\/li><\/ul>\n\n\n\n<p>V\u00ed d\u1ee5 ch\u1ec9 l\u1eb7p l\u1ea1i theo chi\u1ec1u ngang (t\u00f4i th\u00eam vi\u1ec1n c\u1ee7a h\u1ed9p cho b\u1ea1n d\u1ec5 nh\u00ecn):<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg'); background-repeat: repeat-x; color: yellow; font-size: 40px; height: 150px; width: 90%; border: 1px solid black\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg'); background-repeat: repeat-x; color: yellow; font-size: 40px; height: 150px; width: 400px;\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>V\u00ed d\u1ee5 ch\u1ec9 l\u1eb7p l\u1ea1i theo chi\u1ec1u d\u1ecdc (t\u00f4i th\u00eam vi\u1ec1n c\u1ee7a h\u1ed9p cho b\u1ea1n d\u1ec5 nh\u00ecn):<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg'); background-repeat: repeat-y; color: yellow; font-size: 40px; height: 200px; width: 90%; border: 1px solid black\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg'); background-repeat: repeat-y; color: yellow; font-size: 40px; height: 150px; width: 400px;\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y m\u1ed9t ph\u1ea7n kh\u00f4ng gian c\u1ee7a n\u1ec1n ch\u01b0a \u0111\u01b0\u1ee3c l\u1ea5p \u0111\u1ea7y do \u1ea3nh n\u1ec1n ch\u1ec9 \u0111\u01b0\u1ee3c l\u1eb7p theo 1 chi\u1ec1u. <\/p>\n\n\n\n<p>L\u1eb7p l\u1ea1i \u1ea3nh theo chi\u1ec1u n\u00e0o \u0111\u00f3 (ho\u1eb7c c\u1ea3 2 chi\u1ec1u) r\u1ea5t hay d\u00f9ng trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng t\u1ea3i v\u1ec1, \u0111\u1eb7c bi\u1ec7t l\u00e0 \u0111\u1ed1i v\u1edbi c\u00e1c hoa v\u0103n h\u1ecda ti\u1ebft c\u00f3 t\u00ednh l\u1eb7p l\u1ea1i ho\u1eb7c n\u1ec1n c\u00f3 k\u00edch th\u01b0\u1edbc kh\u00f4ng bi\u1ebft tr\u01b0\u1edbc. Thay v\u00ec d\u00f9ng \u1ea3nh l\u1edbn \u0111\u1ebfn 200 &#8211; 500KB, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng \u1ea3nh ch\u1ec9 \u0111\u1ed9 5 &#8211; 10KB v\u00e0 l\u1eb7p l\u1ea1i n\u00f3 \u0111\u1ec3 t\u1ea1o n\u1ec1n \u1ea5n t\u01b0\u1ee3ng.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-attachment\"><\/span>Thu\u1ed9c t\u00ednh&nbsp;background-attachment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u00e2y l\u00e0 thu\u1ed9c t\u00ednh gi\u00fap x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i c\u1ee7a n\u1ed9i dung so v\u1edbi \u1ea3nh n\u1ec1n. Theo m\u1eb7c \u0111\u1ecbnh, gi\u00e1 tr\u1ecb n\u00e0y l\u00e0&nbsp;<code>scroll<\/code>, ngh\u0129a l\u00e0 \u1ea3nh s\u1ebd y\u00ean v\u1ecb l\u00e0m n\u1ec1n. <\/p>\n\n\n\n<p>Tr\u01b0\u1eddng h\u1ee3p b\u1ea1n \u0111\u1ec3&nbsp;<code>fixed<\/code>&nbsp;th\u00ec \u1ea3nh n\u1ec1n s\u1ebd di chuy\u1ec3n theo n\u1ed9i dung (<code>background-attachment:fixed;<\/code>). \u0110\u1ec3 d\u00f9ng thu\u1ed9c t\u00ednh background-attachment b\u1ea1n ph\u1ea3i \u0111\u1ec3&nbsp;<code>background-repeat: no-repeat;<\/code><\/p>\n\n\n\n<p>N\u1ebfu n\u1ed9i dung b\u00e0i vi\u1ebft d\u00e0i th\u00ec th\u01b0\u1eddng \u1ea3nh s\u1ebd kh\u00f4ng \u0111\u1ee7 \u0111\u1ed9 l\u1edbn bao tr\u00f9m n\u1ec1n c\u1ea3 trang web, khi \u0111\u00f3 b\u1ea1n n\u00ean d\u00f9ng gi\u00e1 tr\u1ecb&nbsp;<code>fixed<\/code><em>.<\/em><\/p>\n\n\n\n<p>Xem v\u00ed d\u1ee5 b\u1ea1n s\u1ebd th\u1ea5y d\u1ec5 hi\u1ec3u h\u01a1n, di chuy\u1ec3n thanh cu\u1ed9n d\u1ecdc \u0111\u1ec3 th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t.<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background.jpg'); background-repeat: no-repeat; color: #6aa84f; font-size: 40px; height: 300px; width: 90%;\">background-attachment theo m\u1eb7c \u0111\u1ecbnh<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background.jpg'); background-repeat: no-repeat; color: #6aa84f; font-size: 40px; height: 300px; width: 400px;\"&gt;background-attachment theo m\u1eb7c \u0111\u1ecbnh&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"background-attachment: fixed; background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background.jpg'); background-repeat: no-repeat; color: #6aa84f; font-size: 40px; height: 300px; width: 90%;\">background-attachment c\u00f3 gi\u00e1 tr\u1ecb fixed<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-attachment: fixed; background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background.jpg'); background-repeat: no-repeat; color: #6aa84f; font-size: 40px; height: 300px; width: 400px;\"&gt;background-attachment c\u00f3 gi\u00e1 tr\u1ecb fixed&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-position\"><\/span>Thu\u1ed9c t\u00ednh background-position<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>B\u1ea1n s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh n\u00e0y \u0111\u1ec3 quy \u0111\u1ecbnh v\u1ecb tr\u00ed c\u1ee7a \u1ea3nh so v\u1edbi n\u1ec1n, \u0111a s\u1ed1 ch\u1ec9 d\u00f9ng trong tr\u01b0\u1eddng h\u1ee3p \u1ea3nh nh\u1ecf h\u01a1n n\u1ec1n, v\u1ec1 t\u1eeb kh\u00f3a c\u00f3 8 gi\u00e1 tr\u1ecb cho b\u1ea1n ch\u1ecdn l\u1ef1a:<\/p>\n\n\n\n<ul><li><code>left-top<\/code>: g\u00f3c b\u00ean tr\u00e1i ph\u00eda tr\u00ean;<\/li><li><code>left-center<\/code>: b\u00ean tr\u00e1i ch\u00ednh gi\u1eefa;<\/li><li><code>left-bottom<\/code>: g\u00f3c b\u00ean tr\u00e1i ph\u00eda d\u01b0\u1edbi;<\/li><li><code>right-top<\/code>: g\u00f3c b\u00ean ph\u1ea3i ph\u00eda tr\u00ean;<\/li><li><code>right-center<\/code>: b\u00ean ph\u1ea3i ch\u00ednh gi\u1eefa;<\/li><li><code>right-bottom<\/code>: g\u00f3c b\u00ean ph\u1ea3i ph\u00eda d\u01b0\u1edbi;<\/li><li><code>center-top<\/code>: b\u00ean tr\u00ean ch\u00ednh gi\u1eefa;<\/li><li><code>center-center<\/code>: ngay t\u1ea1i trung t\u00e2m;<\/li><li><code>center-bottom<\/code>: b\u00ean d\u01b0\u1edbi ch\u00ednh gi\u1eefa;<\/li><\/ul>\n\n\n\n<p>Ngo\u00e0i ra l\u00e0 s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3, n\u00f3 gi\u00fap b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed c\u1ee7a \u1ea3nh n\u1ec1n t\u1ea1i b\u1ea5t c\u1ee9 \u0111\u00e2u m\u00e0 b\u1ea1n mu\u1ed1n, th\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div\n{\nbackground-image:url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg');\nbackground-repeat:no-repeat;\nbackground-position:30px 50px;\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/background-nho.jpg'); background-position: 30px 50px; background-repeat: no-repeat; border: 3px solid #000; height: 300px; width: 90%;\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-size\"><\/span>Thu\u1ed9c t\u00ednh background-size<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>T\u00f4i r\u1ea5t \u00edt khi d\u00f9ng thu\u1ed9c t\u00ednh n\u00e0y, nh\u01b0ng \u0111i\u1ec1u \u1ea5y kh\u00f4ng c\u00f3 ngh\u0129a l\u00e0 ch\u00fang ta kh\u00f4ng bao gi\u1edd s\u1eed d\u1ee5ng, v\u00e0 s\u1ebd thi\u1ebfu s\u00f3t n\u1ebfu kh\u00f4ng \u0111\u1ec1 c\u1eadp \u0111\u1ebfn n\u00f3.<\/p>\n\n\n\n<p>Tr\u01b0\u1edbc CSS3, \u1ea3nh \u0111\u01b0\u1ee3c l\u00e0m n\u1ec1n l\u1ea5y k\u00edch th\u01b0\u1edbc th\u1ef1c c\u1ee7a n\u00f3 ban \u0111\u1ea7u, gi\u1edd \u0111\u00e2y v\u1edbi <code>background-size<\/code>, b\u1ea1n quy\u1ebft \u0111\u1ecbnh \u1ea3nh n\u1ec1n c\u00f3 gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 l\u00e0 bao nhi\u00eau t\u00f9y \u00fd, code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-repeat: no-repeat; background-size: 160px 120px; border: 3px solid #000; height: 300px; width: 400px;\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-repeat: no-repeat; background-size: 160px 120px; border: 3px solid #000; height: 300px; width: 90%;\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>\u1ea2nh g\u1ed1c:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"266\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg\" alt=\"\u1ea3nh minh h\u1ecda l\u00e0m background\" class=\"wp-image-13068\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg 400w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index-300x200.jpg 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-clip\"><\/span>Thu\u1ed9c t\u00ednh background-clip<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u00e2y c\u0169ng l\u00e0 thu\u1ed9c t\u00ednh m\u1edbi trong CSS3, <code>border-clip<\/code> quy \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 ph\u1ee7 c\u1ee7a n\u1ec1n m\u00e0u (kh\u00f4ng \u00e1p d\u1ee5ng cho n\u1ec1n l\u00e0 \u1ea3nh), ch\u00fang ta c\u00f3 3 gi\u00e1 tr\u1ecb:<\/p>\n\n\n\n<ul><li><code>border-box<\/code>: \u0111\u00e2y l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh, ngh\u0129a l\u00e0 n\u1ec1n bao ph\u1ee7 \u0111\u1ebfn t\u1eadn \u0111\u01b0\u1eddng vi\u1ec1n, th\u00f4ng th\u01b0\u1eddng th\u00ec c\u0169ng nh\u01b0 th\u1ebf r\u1ed3i, n\u00ean b\u1ea1n ch\u1ec9 th\u1ea5y kh\u00e1c bi\u1ec7t \u1edf nh\u1eefng gi\u00e1 tr\u1ecb sau\u2026<\/li><li><code>padding-box<\/code>: ngh\u0129a l\u00e0 n\u1ec1n ch\u1ec9 bao ph\u1ee7 \u0111\u1ebfn padding m\u00e0 kh\u00f4ng bao g\u1ed3m \u0111\u01b0\u1eddng vi\u1ec1n.<\/li><li><code>content-box<\/code>: ngh\u0129a l\u00e0 n\u1ec1n ch\u1ec9 bao ph\u1ee7 ph\u1ea7n n\u1ed9i dung, kh\u00f4ng g\u1ed3m padding v\u00e0 vi\u1ec1n.<\/li><\/ul>\n\n\n\n<p>OK, gi\u1edd l\u00e0 l\u00fac \u0111\u1ebfn c\u00e1c v\u00ed d\u1ee5 minh h\u1ecda c\u1ee5 th\u1ec3, n\u00f3 s\u1ebd gi\u00fap \u0111\u1ee1 ch\u00fang ta hi\u1ec3u r\u00f5 h\u01a1n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#box\n{\npadding:20px;\nborder:5px dotted #000000;\nbackground-color:red;\nbackground-clip:border-box;\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3: <\/p>\n\n\n\n<div style=\"background-clip: border-box; background-color: red; border: 5px dotted #000000; padding: 20px; width: 90%\">\u0110\u00e2y l\u00e0 border-box<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-clip: border-box; background-color: red; border: 5px dotted #000000; padding: 20px;\"&gt;\u0110\u00e2y l\u00e0 border-box&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"background-clip: padding-box; background-color: red; border: 5px dotted #000000; padding: 20px; width: 90%\">\u0110\u00e2y l\u00e0 paddingbox<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-clip: padding-box; background-color: red; border: 5px dotted #000000; padding: 20px;\"&gt;\u0110\u00e2y l\u00e0 paddingbox&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>V\u00e0 cu\u1ed1i c\u00f9ng:<\/p>\n\n\n\n<div style=\"background-clip: content-box; background-color: red; border: 5px dotted #000000; padding: 20px; width: 90%\">\u0110\u00e2y l\u00e0 content-box<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-clip: content-box; background-color: red; border: 5px dotted #000000; padding: 20px;\"&gt;\u0110\u00e2y l\u00e0 content-box&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>B\u1ea1n \u0111\u00e3 th\u1ea5y kh\u00e1c bi\u1ec7t r\u1ea5t r\u00f5 n\u00e9t gi\u1eefa c\u00e1c box do c\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c nhau c\u1ee7a <code>border-clip<\/code> t\u1ea1o ra.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_background-origin\"><\/span>Thu\u1ed9c t\u00ednh background-origin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>V\u1ec1 c\u01a1 b\u1ea3n, <code>background-origin<\/code> r\u1ea5t gi\u1ed1ng <code>background-clip<\/code>, c\u0169ng c\u00f3 c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 th\u1ebf: <code>border-box<\/code>; <code>padding-box<\/code>; <code>content-box<\/code>. <\/p>\n\n\n\n<p>Tuy nhi\u00ean&nbsp;<code>background-clip<\/code> l\u00e0 \u00e1p d\u1ee5ng cho n\u1ec1n m\u00e0u, c\u00f2n <code>background-origin<\/code> l\u00e0 \u00e1p d\u1ee5ng cho n\u1ec1n \u1ea3nh, ngo\u00e0i ra \u2013 \u0111i\u1ec3m kh\u00e1c bi\u1ec7t n\u1eefa \u2013 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh c\u1ee7a <code>background-origin<\/code> l\u00e0 <code>padding-box<\/code> ch\u1ee9 kh\u00f4ng ph\u1ea3i <code>border-box<\/code>..&nbsp;C\u00e1c v\u00ed d\u1ee5.<\/p>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#box {\nbackground-image: url('images\/bg.jpg');\nbackground-repeat: no-repeat;\nbackground-size: 80px 60px;\nborder: 5px dotted #000;\npadding: 20px;\nwidth: 400px;\nbackground-origin: border-box;\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-origin: border-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 90%;\">B\u1ea1n \u0111\u00e3 th\u1ea5y \u1ea3nh l\u00e0m n\u1ec1n ngay c\u1ea3 cho vi\u1ec1n c\u1ee7a h\u1ed9p? \u0110\u00e2y ch\u00ednh l\u00e0 gi\u00e1 tr\u1ecb border-box c\u1ee7a background-origin.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-origin: border-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 400px;\"&gt;B\u1ea1n \u0111\u00e3 th\u1ea5y \u1ea3nh l\u00e0m n\u1ec1n ngay c\u1ea3 cho vi\u1ec1n c\u1ee7a h\u1ed9p? \u0110\u00e2y ch\u00ednh l\u00e0 gi\u00e1 tr\u1ecb border-box c\u1ee7a background-origin.&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>padding-box: <\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-origin: padding-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 90%;\">\u1ea2nh kh\u00f4ng l\u00e0m n\u1ec1n cho vi\u1ec1n n\u1eefa, \u0111\u00e2y l\u00e0 c\u00e1ch m\u00e0 b\u1ea1n hay th\u1ea5y nh\u1ea5t, n\u00f3 c\u0169ng l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh c\u1ee7a background-origin, l\u00e0 padding-box.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-origin: padding-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 400px;\"&gt;\u1ea2nh kh\u00f4ng l\u00e0m n\u1ec1n cho vi\u1ec1n n\u1eefa, \u0111\u00e2y l\u00e0 c\u00e1ch m\u00e0 b\u1ea1n hay th\u1ea5y nh\u1ea5t, n\u00f3 c\u0169ng l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh c\u1ee7a background-origin, l\u00e0 padding-box.&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>content-box: <\/p>\n\n\n\n<div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-origin: content-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 90%;\">Cu\u1ed1i c\u00f9ng, \u1ea3nh kh\u00f4ng n\u1eb1m \u1edf \u0111\u01b0\u1eddng vi\u1ec1n, c\u0169ng kh\u00f4ng n\u1eb1m \u1edf ph\u1ea7n padding m\u00e0 ch\u1ec9 l\u00e0m n\u1ec1n cho n\u1ed9i dung c\u1ee7a box. V\u00e2ng, \u0111\u00e2y l\u00e0 gi\u00e1 tr\u1ecb cu\u1ed1i c\u00f9ng c\u1ee7a background-origin, l\u00e0 content-box.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"background-image: url('https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg'); background-origin: content-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 400px;\"&gt;Cu\u1ed1i c\u00f9ng, \u1ea3nh kh\u00f4ng n\u1eb1m \u1edf \u0111\u01b0\u1eddng vi\u1ec1n, c\u0169ng kh\u00f4ng n\u1eb1m \u1edf ph\u1ea7n padding m\u00e0 ch\u1ec9 l\u00e0m n\u1ec1n cho n\u1ed9i dung c\u1ee7a box. V\u00e2ng, \u0111\u00e2y l\u00e0 gi\u00e1 tr\u1ecb cu\u1ed1i c\u00f9ng c\u1ee7a background-origin, l\u00e0 content-box.&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Viet_tat_khi_dung_Background\"><\/span>Vi\u1ebft t\u1eaft khi d\u00f9ng Background<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 c\u00e1c d\u00f2ng code \u0111\u01b0\u1ee3c ng\u1eafn h\u01a1n, thay v\u00ec vi\u1ebft r\u00f5 t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh v\u00e0 c\u00e1c gi\u00e1 tr\u1ecb tr\u00ean t\u1eebng d\u00f2ng, ch\u00fang ta c\u00f3 th\u1ec3 khai b\u00e1o thu\u1ed9c t\u00ednh duy nh\u1ea5t r\u1ed3i khai b\u00e1o \u0111\u1ed3ng th\u1eddi c\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c \u0111i k\u00e8m. <\/p>\n\n\n\n<p>Khai b\u00e1o t\u1eaft cho t\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a background, b\u1ea1n \u0111\u01a1n gi\u1ea3n s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a background th\u00f4i. <\/p>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> #box {background:red url('bg.jpg') no-repeat right top;} <\/code><\/pre>\n\n\n\n<p>V\u1eady l\u00e0 thay v\u00ec ph\u1ea3i vi\u1ebft <code>background-color<\/code>, <code>background-image<\/code>, <code>background-repeat<\/code>, <code>background-position<\/code>, b\u1ea1n ch\u1ec9 ph\u1ea3i vi\u1ebft duy nh\u1ea5t m\u1ed9t d\u00f2ng.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Background&nbsp;l\u00e0 thu\u1ed9c t\u00ednh quan tr\u1ecdng trong CSS, n\u00f3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o n\u1ec1n cho c\u00e1c th\u1ebb m\u00e0 d\u1ec5 th\u1ea5y nh\u1ea5t l\u00e0 th\u1ebb body. N\u1ec1n c\u00f3 hai ki\u1ec3u: n\u1ec1n m\u00e0u v\u00e0 n\u1ec1n d\u00f9ng \u1ea3nh. N\u1ec1n m\u00e0u l\u00e0 c\u00e1ch d\u00f9ng n\u1ec1n ph\u1ed5 bi\u1ebfn h\u01a1n c\u1ea3, h\u1ea7u h\u1ebft c\u00e1c trang web \u0111\u1ec1u s\u1eed d\u1ee5ng n\u1ec1n cho to\u00e0n trang &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>9 c\u00e1ch s\u1eed d\u1ee5ng background (n\u1ec1n) trong CSS &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/background-trong-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 c\u00e1ch s\u1eed d\u1ee5ng background (n\u1ec1n) trong CSS &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Background&nbsp;l\u00e0 thu\u1ed9c t\u00ednh quan tr\u1ecdng trong CSS, n\u00f3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o n\u1ec1n cho c\u00e1c th\u1ebb m\u00e0 d\u1ec5 th\u1ea5y nh\u1ea5t l\u00e0 th\u1ebb body. N\u1ec1n c\u00f3 hai ki\u1ec3u: n\u1ec1n m\u00e0u v\u00e0 n\u1ec1n d\u00f9ng \u1ea3nh. N\u1ec1n m\u00e0u l\u00e0 c\u00e1ch d\u00f9ng n\u1ec1n ph\u1ed5 bi\u1ebfn h\u01a1n c\u1ea3, h\u1ea7u h\u1ebft c\u00e1c trang web \u0111\u1ec1u s\u1eed d\u1ee5ng n\u1ec1n cho to\u00e0n trang &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/background-trong-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-09T10:08:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-20T09:21:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"9 c\u00e1ch s\u1eed d\u1ee5ng background (n\u1ec1n) trong CSS &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/background-trong-css\/","og_locale":"vi_VN","og_type":"article","og_title":"9 c\u00e1ch s\u1eed d\u1ee5ng background (n\u1ec1n) trong CSS &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Background&nbsp;l\u00e0 thu\u1ed9c t\u00ednh quan tr\u1ecdng trong CSS, n\u00f3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o n\u1ec1n cho c\u00e1c th\u1ebb m\u00e0 d\u1ec5 th\u1ea5y nh\u1ea5t l\u00e0 th\u1ebb body. N\u1ec1n c\u00f3 hai ki\u1ec3u: n\u1ec1n m\u00e0u v\u00e0 n\u1ec1n d\u00f9ng \u1ea3nh. N\u1ec1n m\u00e0u l\u00e0 c\u00e1ch d\u00f9ng n\u1ec1n ph\u1ed5 bi\u1ebfn h\u01a1n c\u1ea3, h\u1ea7u h\u1ebft c\u00e1c trang web \u0111\u1ec1u s\u1eed d\u1ee5ng n\u1ec1n cho to\u00e0n trang &hellip;","og_url":"https:\/\/kiencang.net\/background-trong-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-09-09T10:08:00+00:00","article_modified_time":"2022-08-20T09:21:53+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/z-index.jpg"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/background-trong-css\/","url":"https:\/\/kiencang.net\/background-trong-css\/","name":"9 c\u00e1ch s\u1eed d\u1ee5ng background (n\u1ec1n) trong CSS &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-09-09T10:08:00+00:00","dateModified":"2022-08-20T09:21:53+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/background-trong-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/background-trong-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/background-trong-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"9 c\u00e1ch s\u1eed d\u1ee5ng background (n\u1ec1n) trong CSS"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/314"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=314"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/314\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}