{"id":73139,"date":"2024-06-14T17:14:58","date_gmt":"2024-06-14T10:14:58","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=73139"},"modified":"2025-09-28T22:32:38","modified_gmt":"2025-09-28T15:32:38","slug":"chen-anh-trong-html","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/","title":{"rendered":"Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/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\"><span class=\"ez-toc-js-icon-con\"><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><\/span><\/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:\/\/itviec.com\/blog\/chen-anh-trong-html\/#Mot_so_dinh_dang_anh_thong_dung_trong_HTML\" >M\u1ed9t s\u1ed1 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh th\u00f4ng d\u1ee5ng trong HTML\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#Gioi_thieu_tong_quan_ve_the_img_trong_HTML\" >Gi\u1edbi thi\u1ec7u t\u1ed5ng quan v\u1ec1 th\u1ebb img trong HTML\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#8_buoc_chen_anh_trong_HTML_bang_the\" >8 b\u01b0\u1edbc ch\u00e8n \u1ea3nh trong HTML b\u1eb1ng th\u1ebb &lt;img&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#Huong_dan_chen_anh_trong_HTML_o_background_nen\" >H\u01b0\u1edbng d\u1eabn ch\u00e8n \u1ea3nh trong HTML \u1edf background (n\u1ec1n)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#Chen_anh_trong_HTML_su_dung_before_va_after_trong_CSS\" >Ch\u00e8n \u1ea3nh trong HTML s\u1eed d\u1ee5ng ::before v\u00e0 ::after trong CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#Cac_cau_hoi_thuong_gap_ve_chen_anh_trong_HTML\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 ch\u00e8n \u1ea3nh trong HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#Tong_ket_ve_cach_chen_anh_trong_HTML\" >T\u1ed5ng k\u1ebft v\u1ec1 c\u00e1ch ch\u00e8n \u1ea3nh trong HTML<\/a><\/li><\/ul><\/nav><\/div>\n<p><b><i>H\u00ecnh \u1ea3nh l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 kh\u00f4ng k\u00e9m ph\u1ea7n quan tr\u1ecdng trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n trang web, gi\u00fap website c\u1ee7a b\u1ea1n t\u0103ng th\u00eam t\u00ednh tr\u1ef1c quan, \u0111\u1ed3ng th\u1eddi c\u1ea3i thi\u1ec7n \u0111\u00e1ng k\u1ec3 tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. V\u1eady c\u00e1ch ch\u00e8n \u1ea3nh trong HTML \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n nh\u01b0 th\u1ebf n\u00e0o?<\/i><\/b><\/p>\n<p><span style=\"font-weight: 400;\">B\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y s\u1ebd gi\u1ea3i \u0111\u00e1p chi ti\u1ebft v\u1ec1:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c \u0111\u1ecbnh d\u1ea1ng h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong HTML<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c b\u01b0\u1edbc ch\u00e8n h\u00ecnh \u1ea3nh v\u00e0o trang web b\u1eb1ng th\u1ebb img trong HTML<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch ch\u00e8n \u1ea3nh n\u1ec1n v\u00e0 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh c\u1ee7a CSS \u0111\u1ec3 ch\u00e8n h\u00ecnh \u1ea3nh<\/span><\/li>\n<\/ul>\n<blockquote><p><em>Tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/it-jobs\/html?utm_medium=anchor_text_high&amp;utm_source=blog&amp;utm_campaign=viec_lam_html&amp;utm_content=chen_anh_trong_html\" target=\"_blank\" rel=\"noopener\"><strong>vi\u1ec7c l\u00e0m HTML<\/strong><\/a> m\u1edbi nh\u1ea5t tr\u00ean to\u00e0n qu\u1ed1c<\/em><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Mot_so_dinh_dang_anh_thong_dung_trong_HTML\"><\/span><b> M\u1ed9t s\u1ed1 \u0111\u1ecbnh d\u1ea1ng \u1ea3nh th\u00f4ng d\u1ee5ng trong HTML\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">HTML h\u1ed7 tr\u1ee3 nhi\u1ec1u lo\u1ea1i \u0111\u1ecbnh d\u1ea1ng h\u00ecnh \u1ea3nh kh\u00e1c nhau nh\u01b0 JPEG, PNG hay GIF,&#8230; Khi l\u1ef1a ch\u1ecdn \u0111\u1ecbnh d\u1ea1ng \u1ea3nh cho trang web, b\u1ea1n c\u00f3 th\u1ec3 xem x\u00e9t \u0111\u1ebfn c\u00e1c y\u1ebfu t\u1ed1 nh\u01b0 lo\u1ea1i n\u1ed9i dung, \u0111\u1ed9 trong su\u1ed1t, ch\u1ea5t l\u01b0\u1ee3ng, dung l\u01b0\u1ee3ng hay kh\u1ea3 n\u0103ng h\u1ed7 tr\u1ee3 tr\u00ecnh duy\u1ec7t \u0111\u1ed1i v\u1edbi \u0111\u1ecbnh d\u1ea1ng \u1ea3nh b\u1ea1n \u0111ang l\u1ef1a ch\u1ecdn.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 th\u00f4ng tin c\u01a1 b\u1ea3n v\u1ec1 c\u00e1c lo\u1ea1i \u0111\u1ecbnh d\u1ea1ng \u1ea3nh trong HTML nh\u01b0 sau:\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>\u0110\u1ecbnh d\u1ea1ng<\/b><\/td>\n<td><b>\u01afu \u0111i\u1ec3m<\/b><\/td>\n<td><b>Th\u00edch h\u1ee3p<\/b><\/td>\n<td><b>H\u1ea1n ch\u1ebf<\/b><\/td>\n<\/tr>\n<tr>\n<td><strong>JPEG (Joint Photographic Experts Group)<\/strong><\/td>\n<td>\n<ul>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u0110\u1ed9 n\u00e9n cao<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc file nh\u1ecf<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">Ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh t\u1ed1t<\/span><\/li>\n<\/ul>\n<\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">D\u1ea1ng \u1ea3nh ch\u1ee5p v\u00e0 \u1ea3nh c\u00f3 m\u00e0u gradient<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi h\u00ecnh \u1ea3nh c\u00f3 \u0111\u1ed9 trong su\u1ed1t<\/span><\/td>\n<\/tr>\n<tr>\n<td><strong>PNG (Portable Network Graphics)<\/strong><\/td>\n<td>\n<ul>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 n\u00e9n lossless<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">Ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh t\u1ed1t<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">C\u00f3 \u0111\u1ed9 trong su\u1ed1t<\/span><\/li>\n<\/ul>\n<\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh c\u00f3 \u0111\u1ed9 trong su\u1ed1t, icon, logo ho\u1eb7c \u0111\u1ed3 h\u1ecda n\u00e9t<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc t\u1ec7p l\u1edbn h\u01a1n so v\u1edbi JPEG<\/span><\/td>\n<\/tr>\n<tr>\n<td><strong>GIF (Graphics Interchange Format)<\/strong><\/td>\n<td>\n<ul>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 h\u00ecnh \u1ea3nh \u0111\u1ed9ng<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">C\u00f3 \u0111\u1ed9 trong su\u1ed1t<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc nh\u1ecf cho \u0111\u1ed3 h\u1ecda \u0111\u01a1n gi\u1ea3n<\/span><\/li>\n<\/ul>\n<\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Ho\u1ea1t \u1ea3nh \u0111\u01a1n gi\u1ea3n, h\u00ecnh \u1ea3nh c\u00f3 b\u1ea3ng m\u00e0u h\u1ea1n ch\u1ebf<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 b\u1ea3ng m\u00e0u c\u00f2n h\u1ea1n ch\u1ebf, kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi \u1ea3nh ch\u1ee5p ho\u1eb7c h\u00ecnh \u1ea3nh ph\u1ee9c t\u1ea1p<\/span><\/td>\n<\/tr>\n<tr>\n<td><strong>SVG (Scalable Vector Graphics)<\/strong><\/td>\n<td>\n<ul>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">Kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o \u0111\u1ed9 ph\u00e2n gi\u1ea3i<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc t\u1ec7p nh\u1ecf<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">Hi\u1ec3n th\u1ecb s\u1eafc n\u00e9t \u1edf m\u1ecdi k\u00edch th\u01b0\u1edbc<\/span><\/li>\n<\/ul>\n<\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">\u0110\u1ed3 h\u1ecda Vector, logo, icon, h\u00ecnh \u1ea3nh chia t\u1ef7 l\u1ec7 m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi nh\u1eefng h\u00ecnh \u1ea3nh ph\u1ee9c t\u1ea1p<\/span><\/td>\n<\/tr>\n<tr>\n<td><strong>WebP<\/strong><\/td>\n<td>\n<ul>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">Cung c\u1ea5p kh\u1ea3 n\u0103ng n\u00e9n m\u1ea5t ho\u1eb7c kh\u00f4ng m\u1ea5t d\u1eef li\u1ec7u<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc t\u1ec7p nh\u1ecf v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh t\u1ed1t<\/span><\/li>\n<\/ul>\n<\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Tr\u00ecnh duy\u1ec7t web hi\u1ec7n \u0111\u1ea1i v\u00e0 ph\u00e2n gi\u1ea3i h\u00ecnh \u1ea3nh hi\u1ec7u qu\u1ea3<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 h\u1ea1n ch\u1ebf trong c\u00e1c tr\u00ecnh duy\u1ec7t phi\u00ean b\u1ea3n c\u0169<\/span><\/td>\n<\/tr>\n<tr>\n<td><strong>TIFF (Tagged Image File Format)<\/strong><\/td>\n<td>\n<ul>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">L\u01b0u tr\u1eef h\u00ecnh \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng cao<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng th\u1ebb (tag) t\u00ecm ki\u1ebfm v\u0103n b\u1ea3n trong h\u00ecnh \u1ea3nh<\/span><\/li>\n<li style=\"text-align: left;\"><span style=\"font-weight: 400;\">N\u00e9n kh\u00f4ng l\u00e0m m\u1ea5t d\u1eef li\u1ec7u<\/span><\/li>\n<\/ul>\n<\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">C\u00e1c \u0111\u1ecbnh d\u1ea1ng \u0111\u1ed3 h\u1ecda raster<\/span><\/td>\n<td style=\"text-align: left;\">\n<ul>\n<li><span style=\"font-weight: 400;\">Dung l\u01b0\u1ee3ng l\u1edbn h\u01a1n PNG ho\u1eb7c JPEG<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng th\u01b0\u1eddng xuy\u00ean trong c\u00e1c tr\u00ecnh duy\u1ec7t web<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c k\u1ebft h\u1ee3p c\u00e1c \u0111\u1ecbnh d\u1ea1ng trong trang web \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a ph\u00e2n ph\u1ed1i h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ea5t ph\u1ed5 bi\u1ebfn. \u0110\u1ed1i v\u1edbi c\u00e1c \u1ea3nh c\u00f3 dung l\u01b0\u1ee3ng l\u1edbn, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 ho\u1eb7c k\u1ef9 thu\u1eadt \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng nh\u01b0ng v\u1eabn \u0111\u1ea3m b\u1ea3o duy tr\u00ec \u0111\u01b0\u1ee3c ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh. \u0110i\u1ec1u n\u00e0y s\u1ebd gi\u00fap c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t c\u1ee7a web t\u1ed1t h\u01a1n.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Gioi_thieu_tong_quan_ve_the_img_trong_HTML\"><\/span><b> Gi\u1edbi thi\u1ec7u t\u1ed5ng quan v\u1ec1 th\u1ebb img trong HTML\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Th\u1ebb img trong HTML<\/b><span style=\"font-weight: 400;\"> th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ch\u00e8n h\u00ecnh \u1ea3nh v\u00e0o trang web b\u1eb1ng c\u00e1ch nh\u00fang li\u00ean k\u1ebft c\u1ee7a ch\u00fang. Tr\u00ecnh duy\u1ec7t s\u1ebd t\u1ea1o m\u1ed9t kho\u1ea3ng tr\u1ed1ng th\u00edch h\u1ee3p \u0111\u1ec3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh, \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 src, width, height hay alt,&#8230; v\u00e0 th\u1ebb &lt;img&gt; l\u00e0 m\u1ed9t th\u1ebb t\u1ef1 \u0111\u00f3ng, kh\u00f4ng c\u1ea7n th\u00eam th\u1ebb \u0111\u00f3ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p c\u01a1 b\u1ea3n c\u1ee7a th\u1ebb &lt;img&gt; \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;img src=\"\u0111\u01b0\u1eddng_d\u1eabn_\u0111\u1ebfn_\u1ea3nh\"&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, c\u00f3 hai c\u00e1ch \u0111\u1ec3 khai b\u00e1o \u0111\u01b0\u1eddng d\u1eabn \u0111\u1ebfn n\u01a1i ch\u1ee9a h\u00ecnh \u1ea3nh l\u00e0:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u00e1ch 1:<\/b><span style=\"font-weight: 400;\"> Cung c\u1ea5p \u0111\u01b0\u1eddng d\u1eabn tuy\u1ec7t \u0111\u1ed1i c\u1ee7a h\u00ecnh \u1ea3nh (\u0111\u1ecba ch\u1ec9 URL, \u0111\u01b0\u1eddng d\u1eabn c\u1ee5c b\u1ed9), sau \u0111\u00f3 nh\u00fang ch\u00fang v\u00e0o thu\u1ed9c t\u00ednh c\u1ee7a th\u1ebb &lt;img&gt;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u00e1ch 2:<\/b><span style=\"font-weight: 400;\"> Cung c\u1ea5p \u0111\u01b0\u1eddng d\u1eabn t\u01b0\u01a1ng \u0111\u1ed1i \u0111\u1ebfn v\u1ecb tr\u00ed ch\u1ee9a h\u00ecnh \u1ea3nh c\u1ee7a trang web hi\u1ec7n t\u1ea1i.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng th\u1ebb img, h\u00e3y tham kh\u1ea3o qua c\u00e1c b\u01b0\u1edbc <\/span><b>ch\u00e8n \u1ea3nh trong HTML <\/b><span style=\"font-weight: 400;\">ngay sau \u0111\u00e2y!<\/span><\/p>\n<blockquote><p><em>Tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/it-jobs\/html?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=viec_lam_html&amp;utm_content=chen_anh_trong_html\" target=\"_blank\" rel=\"noopener\"><strong>vi\u1ec7c l\u00e0m HTML<\/strong><\/a> m\u1edbi nh\u1ea5t tr\u00ean to\u00e0n qu\u1ed1c<\/em><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"8_buoc_chen_anh_trong_HTML_bang_the\"><\/span><b>8 b\u01b0\u1edbc ch\u00e8n \u1ea3nh trong HTML b\u1eb1ng th\u1ebb &lt;img&gt;<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh src v\u00e0 th\u1ebb img trong HTML<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n ch\u00e8n \u1ea3nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <\/span><b>th\u1ebb img trong HTML<\/b><span style=\"font-weight: 400;\"> th\u00ec kh\u00f4ng th\u1ec3 thi\u1ebfu thu\u1ed9c t\u00ednh src. Thu\u1ed9c t\u00ednh n\u00e0y ch\u1ec9 \u0111\u1ecbnh \u0111\u01b0\u1eddng d\u1eabn t\u1edbi \u1ea3nh m\u00e0 b\u1ea1n mu\u1ed1n ch\u00e8n. \u0110\u01b0\u1eddng d\u1eabn c\u00f3 th\u1ec3 l\u00e0 t\u01b0\u01a1ng \u0111\u1ed1i (relative) ho\u1eb7c tuy\u1ec7t \u0111\u1ed1i (absolute), n\u1ebfu thi\u1ebfu thu\u1ed9c t\u00ednh n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd kh\u00f4ng bi\u1ebft ph\u1ea3i hi\u1ec3n th\u1ecb n\u1ed9i dung g\u00ec. \u0110\u1ec3 h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb t\u1ed1t, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ph\u1ed5 bi\u1ebfn nh\u01b0 jpeg, png ho\u1eb7c gif.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">img {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0background-color: black;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Ch\u00e8n h\u00ecnh \u1ea3nh v\u00e0o HTML&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n h\u00ecnh \u1ea3nh b\u1eb1ng thu\u1ed9c t\u00ednh src&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;img <\/span><b>src=\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\"<\/b><span style=\"font-weight: 400;\"> alt=\"itviecblog\" width=\"900\" height=\"345\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><b><\/b><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73180\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-1-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"901\" height=\"444\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-1-vippro.jpg 901w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-1-vippro-300x148.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-1-vippro-700x345.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-1-vippro-200x99.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-1-vippro-100x49.jpg 100w\" sizes=\"auto, (max-width: 901px) 100vw, 901px\" \/><\/p>\n<h3><b>Thu\u1ed9c t\u00ednh alt<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh m\u00e0 kh\u00f4ng c\u1ea7n thu\u1ed9c t\u00ednh alt, tuy nhi\u00ean thu\u1ed9c t\u00ednh n\u00e0y c\u0169ng r\u1ea5t quan tr\u1ecdng trong vi\u1ec7c l\u1eadp tr\u00ecnh web. B\u1edfi n\u1ebfu nh\u01b0 h\u00ecnh \u1ea3nh kh\u00f4ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh, v\u0103n b\u1ea3n thay th\u1ebf \u0111\u01b0\u1ee3c khai b\u00e1o trong thu\u1ed9c t\u00ednh Alt s\u1ebd xu\u1ea5t hi\u1ec7n. B\u00ean c\u1ea1nh \u0111\u00f3, thu\u1ed9c t\u00ednh alt gi\u00fap c\u00e1c c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm h\u00ecnh \u1ea3nh (Google Images) thu th\u1eadp d\u1eef li\u1ec7u v\u00e0 x\u1ebfp h\u1ea1ng trang web t\u1ed1t h\u01a1n.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">img {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color:black;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color:red;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Alternative text&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n h\u00ecnh \u1ea3nh b\u1eb1ng thu\u1ed9c t\u00ednh alt&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;img src=\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\" <\/span><b>alt=\"itviecblog\"<\/b><span style=\"font-weight: 400;\"> width=\"700\" height=\"200\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;N\u1ebfu trang web kh\u00f4ng th\u1ec3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh, alt s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb thay th\u1ebf nh\u01b0 sau:&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;img src=\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.gif\" <\/span><b>alt=\"logo ITViec\"&gt;<\/b>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73181\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-2-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"853\" height=\"448\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-2-vippro.jpg 853w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-2-vippro-300x158.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-2-vippro-700x368.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-2-vippro-200x105.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-2-vippro-100x53.jpg 100w\" sizes=\"auto, (max-width: 853px) 100vw, 853px\" \/><\/p>\n<h3><b>\u0110\u1ecbnh d\u1ea1ng k\u00edch th\u01b0\u1edbc c\u1ee7a h\u00ecnh \u1ea3nh<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh d\u1ea1ng k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng thu\u1ed9c width v\u00e0 height \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh chi\u1ec1u r\u1ed9ng c\u0169ng nh\u01b0 chi\u1ec1u cao c\u1ee7a h\u00ecnh \u1ea3nh. C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh theo \u0111\u01a1n v\u1ecb m\u1eb7c \u0111\u1ecbnh l\u00e0 pixel.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng width v\u00e0 height \u0111\u1ec3 <\/span><b>ch\u00e8n \u1ea3nh trong HTML<\/b><span style=\"font-weight: 400;\"> gi\u00fap c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 t\u1ea3i trang hi\u1ec7u qu\u1ea3, tr\u00ecnh duy\u1ec7t s\u1ebd bi\u1ebft tr\u01b0\u1edbc k\u00edch th\u01b0\u1edbc c\u1ee7a \u1ea3nh, t\u1eeb \u0111\u00f3 c\u00f3 th\u1ec3 d\u00e0nh kh\u00f4ng gian cho \u1ea3nh ngay l\u1eadp t\u1ee9c. \u0110i\u1ec1u n\u00e0y s\u1ebd tr\u00e1nh l\u00e0m thay \u0111\u1ed5i b\u1ed1 c\u1ee5c khi \u1ea3nh \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang web.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, b\u1ea1n mu\u1ed1n \u0111\u1ecbnh d\u1ea1ng h\u00ecnh \u1ea3nh trong \u0111o\u1ea1n m\u00e3 b\u00ean d\u01b0\u1edbi v\u1edbi k\u00edch th\u01b0\u1edbc c\u1ee7a chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao l\u1ea7n l\u01b0\u1ee3t l\u00e0 700&#215;200 pixel.\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;title&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Setting width and height of image<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/title&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">img{<\/span>\r\n<span style=\"font-weight: 400;\">background-color: black;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;\u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a h\u00ecnh \u1ea3nh&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><b>&lt;img src=<\/b>\r\n<b>\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\"<\/b>\r\n<b> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"ITviec Blog logo\"\u00a0<\/b>\r\n<b> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width=\"700\"\u00a0<\/b>\r\n<b> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height=\"200\" \/&gt;<\/b>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73182\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-3-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"886\" height=\"312\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-3-vippro.jpg 886w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-3-vippro-300x106.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-3-vippro-700x247.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-3-vippro-200x70.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-3-vippro-100x35.jpg 100w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/p>\n<h3><b>\u0110i\u1ec1u ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng \u1ea3nh<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ed1i v\u1edbi \u0111\u1ecbnh d\u1ea1ng \u1ea3nh, b\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a ch\u00fang. \u1ede v\u00ed d\u1ee5 n\u00e0y, b\u1ea1n s\u1ebd th\u1ef1c h\u00e0nh s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh border \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng cho h\u00ecnh \u1ea3nh. Theo m\u1eb7c \u0111\u1ecbnh, m\u1ed7i h\u00ecnh \u1ea3nh \u0111\u1ec1u c\u00f3 \u0111\u01b0\u1eddng vi\u1ec1n xung quanh, s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh border s\u1ebd gi\u00fap t\u1ea1o \u0111\u1ed9 d\u00e0y cho \u0111\u01b0\u1eddng vi\u1ec1n \u1ea3nh. \u0110\u1ed9 d\u00e0y b\u1eb1ng 0 ngh\u0129a l\u00e0 kh\u00f4ng c\u00f3 \u0111\u01b0\u1eddng vi\u1ec1n xung quanh.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u1ee5 th\u1ec3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;title&gt;Setting border to image&lt;\/title&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">img {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0background-color: pink;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;p&gt;T\u00f9y ch\u1ec9nh \u0111\u1ecbnh d\u1ea1ng \u1ea3nh&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;img src=<\/span>\r\n<span style=\"font-weight: 400;\">\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\"<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"ITviec Blog logo\"\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width=\"500\"\u00a0<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height=\"200\"\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><b>border=\"7\"\/&gt;<\/b>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73183\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-4-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"814\" height=\"391\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-4-vippro.jpg 814w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-4-vippro-300x144.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-4-vippro-700x336.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-4-vippro-200x96.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-4-vippro-100x48.jpg 100w\" sizes=\"auto, (max-width: 814px) 100vw, 814px\" \/><\/p>\n<h3><b>C\u0103n ch\u1ec9nh l\u1ec1<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ed1i v\u1edbi c\u00e1c tr\u00ecnh duy\u1ec7t web hi\u1ec7n \u0111\u1ea1i, b\u1ea1n c\u00f3 th\u1ec3 c\u0103n ch\u1ec9nh h\u00ecnh \u1ea3nh b\u1eb1ng thu\u1ed9c t\u00ednh CSS image-align v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb \u201cleft\u201d ho\u1eb7c \u201cright\u201d t\u01b0\u01a1ng \u1ee9ng. Tr\u01b0\u1edbc kia, b\u1ea1n c\u00f3 th\u1ec3 thu\u1ed9c t\u00ednh align c\u1ee7a HTML nh\u01b0ng hi\u1ec7n t\u1ea1i ch\u00fang kh\u00f4ng c\u00f2n \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong HTML5 n\u1eefa.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ch\u1eb3ng h\u1ea1n theo v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh c\u1ee7a CSS \u0111\u1ec3 c\u0103n ch\u1ec9nh h\u00ecnh \u1ea3nh sang tr\u00e1i ho\u1eb7c c\u0103n ph\u1ea3i trong m\u1ed9t \u0111o\u1ea1n v\u0103n:<\/span><\/p>\n<pre><b>&lt;style&gt;<\/b>\r\n<b> \u00a0.image-align-left {<\/b>\r\n<b> \u00a0\u00a0\u00a0float: left;<\/b>\r\n<b> \u00a0\u00a0\u00a0margin-right: 10px;<\/b>\r\n<b> \u00a0\u00a0\u00a0background-color:black;<\/b>\r\n<b>\u00a0\u00a0}<\/b>\r\n\r\n<b> \u00a0.image-align-right {<\/b>\r\n<b> \u00a0\u00a0\u00a0float: right;<\/b>\r\n<b> \u00a0\u00a0\u00a0margin-right: 10px;<\/b>\r\n<b> \u00a0\u00a0\u00a0background-color:black;<\/b>\r\n<b> \u00a0}<\/b>\r\n<b>&lt;\/style&gt;<\/b>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;&lt;img src=\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\" alt=\"ITviec Blog\" class=\"image-align-left\"&gt;&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;Trang th\u00f4ng tin&lt;br&gt; ph\u00e1t tri\u1ec3n&lt;br&gt; s\u1ef1 nghi\u1ec7p IT&lt;br&gt; c\u1ee7a b\u1ea1n, &lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;&lt;img src=\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\" alt=\"ITviec Blog\" class=\"image-align-right\"&gt;&lt;\/p&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73184\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-5-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"880\" height=\"285\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-5-vippro.jpg 880w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-5-vippro-300x97.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-5-vippro-700x227.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-5-vippro-200x65.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-5-vippro-100x32.jpg 100w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<h3><b>Th\u00eam li\u00ean k\u1ebft c\u1ee7a h\u00ecnh \u1ea3nh<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n mu\u1ed1n d\u1eabn h\u00ecnh \u1ea3nh v\u1ec1 m\u1ed9t trang trong website ho\u1eb7c n\u1ed9i dung b\u00ean ngo\u00e0i website th\u00ec c\u00f3 th\u1ec3 ch\u00e8n li\u00ean k\u1ebft v\u00e0o \u1ea3nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng ph\u1ea7n t\u1eed &lt;a&gt; (anchor) c\u00f9ng thu\u1ed9c t\u00ednh href bao b\u1ecdc b\u00ean ngo\u00e0i th\u1ebb &lt;img&gt;. Th\u1ebb &lt;a&gt; cho ph\u00e9p b\u1ea1n t\u00f9y ch\u1ec9nh c\u00e1c si\u00eau li\u00ean k\u1ebft c\u1ee7a h\u00ecnh \u1ea3nh trong b\u00e0i, c\u00f3 th\u1ec3 nh\u1ea5n v\u00e0o li\u00ean k\u1ebft v\u1edbi c\u00e1c n\u1ed9i dung b\u00ean ngo\u00e0i trang web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh \u0111\u00f3, c\u00f3 th\u1ec3 b\u1ed5 sung thu\u1ed9c t\u00ednh target=\u201c&lt;gi\u00e1 tr\u1ecb&gt;\u201d \u0111\u1ec3 m\u1edf trang \u0111\u01b0\u1ee3c li\u00ean k\u1ebft trong tab hi\u1ec7n t\u1ea1i ho\u1eb7c tab m\u1edbi.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ch\u1eb3ng h\u1ea1n nh\u01b0 c\u00e1ch ch\u00e8n li\u00ean k\u1ebft v\u00e0o h\u00ecnh \u1ea3nh qua v\u00ed d\u1ee5 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;head&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;title&gt;Adding image as link&lt;\/title&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/head&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">img{<\/span>\r\n\r\n<span style=\"font-weight: 400;\">background-color:black;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3&gt;ITviec Blog&lt;\/h3&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;Ch\u00e8n li\u00ean k\u1ebft v\u00e0o h\u00ecnh \u1ea3nh&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><b>&lt;a href= \"https:\/\/itviec.com\/\"&gt;<\/b>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img src=<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\" alt=\"ITviec Blog logo\"\/&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Sau khi h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb, b\u1ea1n c\u00f3 th\u1ec3 click v\u00e0o h\u00ecnh \u0111\u1ec3 xem \u0111\u01b0\u1eddng d\u1eabn \u0111\u01b0\u1ee3c ch\u00e8n v\u00e0o trong h\u00ecnh \u1ea3nh r\u1ed3i \u0111\u1ea5y.<\/span><b><\/b><\/p>\n<h3><b>Ch\u00e8n Responsive Image<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Hi\u1ec7n nay, \u0111a s\u1ed1 c\u00e1c trang web hi\u1ec7n \u0111\u1ea1i lu\u00f4n c\u1ea7n h\u00ecnh \u1ea3nh hi\u1ec3n th\u1ecb t\u1ed1t, th\u00edch \u1ee9ng linh ho\u1ea1t v\u1edbi nhi\u1ec1u k\u00edch c\u1ee1 m\u00e0n h\u00ecnh kh\u00e1c nhau. \u0110\u1ec3 l\u00e0m cho h\u00ecnh \u1ea3nh c\u1ee7a b\u1ea1n c\u00f3 t\u00ednh ph\u1ea3n h\u1ed3i nhanh v\u00e0 linh ho\u1ea1t, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh max-width c\u1ee7a CSS, thu\u1ed9c t\u00ednh n\u00e0y s\u1ebd gi\u00fap \u1ea3nh t\u1ef1 \u0111\u1ed9ng gi\u1ea3m t\u1ef7 l\u1ec7 ph\u00f9 h\u1ee3p v\u1edbi chi\u1ec1u r\u1ed9ng c\u1ee7a v\u00f9ng ch\u1ee9a, ngay c\u1ea3 khi k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh ho\u1eb7c chi\u1ec1u r\u1ed9ng c\u1ee7a khung gi\u1ea3m.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u n\u00e0y s\u1ebd \u0111\u1ea3m b\u1ea3o h\u00ecnh kh\u00f4ng b\u1ecb tr\u00e0n ho\u1eb7c ph\u00e1 v\u1ee1 b\u1ed1 c\u1ee5c hi\u1ec7n t\u1ea1i c\u1ee7a trang web, th\u1eadm ch\u00ed khi hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf h\u01a1n nh\u01b0 thi\u1ebft b\u1ecb di \u0111\u1ed9ng. Ch\u1eb3ng h\u1ea1n nh\u01b0:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">img{<\/span>\r\n<span style=\"font-weight: 400;\">background-color:black;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Ch\u00e8n h\u00ecnh \u1ea3nh v\u00e0o HTML&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;H\u01b0\u1edbng d\u1eabn c\u00e1ch ch\u00e8n Responsive Image&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;img src=\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\" alt=\"itviecblog\" <\/span><b>style=\"max-width: 100%;<\/b><span style=\"font-weight: 400;\">\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<pre><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73186\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-7-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"562\" height=\"286\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-7-vippro.jpg 562w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-7-vippro-300x153.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-7-vippro-200x102.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-7-vippro-100x51.jpg 100w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/span><b><\/b><\/pre>\n<h3><b>Ch\u00fa th\u00edch h\u00ecnh \u1ea3nh<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 ch\u00e8n ch\u00fa th\u00edch cho h\u00ecnh \u1ea3nh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u1ebb &lt;figure&gt; ho\u1eb7c &lt;figcaption&gt;, \u0111\u00e2y l\u00e0 hai th\u1ebb gi\u00fap cung c\u1ea5p m\u1ed9t v\u00f9ng ch\u1ee9a ng\u1eef ngh\u0129a cho c\u00e1c s\u1ed1 li\u1ec7u v\u00e0 li\u00ean k\u1ebft r\u00f5 r\u00e0ng h\u00ecnh \u1ea3nh v\u1edbi ch\u00fa th\u00edch.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh \u0111\u00f3, b\u1ea1n n\u00ean \u0111i\u1ec1u ch\u1ec9nh n\u1ed9i dung c\u1ee7a ch\u00fa th\u00edch v\u1edbi v\u0103n b\u1ea3n thay th\u1ebf (alt) kh\u00e1c nhau. Theo quan \u0111i\u1ec3m ch\u1ee9c n\u0103ng, ch\u00fa th\u00edch v\u00e0 v\u0103n b\u1ea3n thay th\u1ebf c\u00f3 vai tr\u00f2 ri\u00eang bi\u1ec7t. Ch\u00fa th\u00edch s\u1ebd lu\u00f4n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang web k\u1ec3 c\u1ea3 khi h\u00ecnh \u1ea3nh c\u00f3 hi\u1ec3n th\u1ecb hay kh\u00f4ng th\u1ec3 hi\u1ec3n th\u1ecb. Trong khi \u0111\u00f3, v\u0103n b\u1ea3n thay th\u1ebf ch\u1ec9 hi\u1ec3n th\u1ecb khi h\u00ecnh \u1ea3nh kh\u00f4ng th\u1ec3 hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c tr\u00ean tr\u00ecnh duy\u1ec7t.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Do \u0111\u00f3, ch\u00fa th\u00edch v\u00e0 v\u0103n b\u1ea3n thay th\u1ebf kh\u00f4ng n\u00ean c\u00f3 n\u1ed9i dung gi\u1ed1ng nhau v\u00ec c\u1ea3 hai s\u1ebd \u0111\u1ec1u hi\u1ec3n th\u1ecb khi h\u00ecnh \u1ea3nh bi\u1ebfn m\u1ea5t. C\u1ee5 th\u1ec3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">img{<\/span>\r\n<span style=\"font-weight: 400;\">background-color:black;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n\r\n<b>&lt;figure&gt;<\/b>\r\n<b> \u00a0&lt;img<\/b>\r\n<b> \u00a0\u00a0\u00a0src=\"https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png\"<\/b>\r\n<b> \u00a0\u00a0\u00a0alt=\"ITviec logo\"<\/b>\r\n<b> \u00a0\u00a0\u00a0width=\"700\"<\/b>\r\n<b>\u00a0\u00a0\u00a0\u00a0height=\"200\" \/&gt;<\/b>\r\n\r\n<b> \u00a0&lt;figcaption&gt;<\/b>\r\n<b> \u00a0\u00a0\u00a0\u0110\u00e2y l\u00e0 logo c\u1ee7a ITviec Blog.<\/b>\r\n<b> \u00a0&lt;\/figcaption&gt;<\/b>\r\n<b>&lt;\/figure<\/b><span style=\"font-weight: 400;\">&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73187\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-8-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"813\" height=\"264\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-8-vippro.jpg 813w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-8-vippro-300x97.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-8-vippro-700x227.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-8-vippro-200x65.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-8-vippro-100x32.jpg 100w\" sizes=\"auto, (max-width: 813px) 100vw, 813px\" \/><\/p>\n<blockquote><p>Xem th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/lo-trinh-hoc-html-css-cho-nguoi-moi-bat-dau\/\" target=\"_blank\" rel=\"noopener\"><b>L\u1ed9 tr\u00ecnh 18 b\u01b0\u1edbc h\u1ecdc HTML v\u00e0 CSS chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u<\/b><\/a><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Huong_dan_chen_anh_trong_HTML_o_background_nen\"><\/span><b> H\u01b0\u1edbng d\u1eabn ch\u00e8n \u1ea3nh trong HTML \u1edf background (n\u1ec1n)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh c\u00e1ch <\/span><b>ch\u00e8n \u1ea3nh trong HTML<\/b><span style=\"font-weight: 400;\"> th\u00f4ng th\u01b0\u1eddng, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh h\u00ecnh \u1ea3nh l\u00e0m h\u00ecnh n\u1ec1n cho trang web. \u0110i\u1ec1u n\u00e0y s\u1ebd gi\u00fap c\u1ea3i thi\u1ec7n kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb c\u0169ng nh\u01b0 gi\u00fap trang web g\u00e2y \u1ea5n t\u01b0\u1ee3ng v\u1edbi ng\u01b0\u1eddi d\u00f9ng hi\u1ec7u qu\u1ea3 h\u01a1n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">H\u00ecnh n\u1ec1n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh cho h\u1ea7u h\u1ebft m\u1ecdi ph\u1ea7n t\u1eed HTML. B\u1ea1n c\u00f3 th\u1ec3 ch\u00e8n h\u00ecnh \u1ea3nh background v\u1edbi c\u00e1c tr\u01b0\u1eddng h\u1ee3p c\u1ee5 th\u1ec3 nh\u01b0 sau:\u00a0<\/span><\/p>\n<h3><b>Background cho m\u1ed9t ph\u1ea7n t\u1eed HTML\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 th\u00eam h\u00ecnh n\u1ec1n v\u00e0o ph\u1ea7n t\u1eed HTML, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span><strong><a href=\"https:\/\/itviec.com\/blog\/css-la-gi\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a><\/strong> <b>background-image<\/b><span style=\"font-weight: 400;\"> nh\u01b0 sau:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Ch\u00e8n background v\u00e0o ph\u1ea7n t\u1eed HTML&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;H\u01af\u1edaNG D\u1eaaN CH\u00c8N \u1ea2NH BACKGROUND V\u00c0O HTML&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p <\/span><b>style=\"background-image: url(https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png);\"&gt;<\/b>\r\n<span style=\"font-weight: 400;\">Ch\u00e8n \u1ea3nh v\u00e0o HTML v\u1edbi thu\u1ed9c t\u00ednh src&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">width ho\u1eb7c height \u0111\u1ec3 c\u0103n ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u1ea3nh&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">align \u0111\u1ec3 c\u0103n ch\u1ec9nh \u1ea3nh&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">href \u0111\u1ec3 ch\u00e8n link \u1ea3nh&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">Ho\u1eb7c c\u00e1c thu\u1ed9c t\u00ednh CSS kh\u00e1c&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73188\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-9-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"871\" height=\"289\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-9-vippro.jpg 871w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-9-vippro-300x100.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-9-vippro-700x232.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-9-vippro-200x66.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-9-vippro-100x33.jpg 100w\" sizes=\"auto, (max-width: 871px) 100vw, 871px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ho\u1eb7c b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh h\u00ecnh n\u1ec1n trong ph\u1ea7n t\u1eed &lt;style&gt; c\u00f9ng thu\u1ed9c t\u00ednh CSS background-image nh\u01b0 sau:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<b>&lt;style&gt;<\/b>\r\n<b>p {<\/b>\r\n<b> \u00a0background-image: url(https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png);<\/b>\r\n<b>}<\/b>\r\n<b>&lt;\/style&gt;<\/b>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Background Image&lt;\/h2&gt;\r\n<\/span>\r\n<span style=\"font-weight: 400;\">&lt;p&gt;Ch\u00e8n \u1ea3nh v\u00e0o HTML v\u1edbi thu\u1ed9c t\u00ednh src&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">width ho\u1eb7c height \u0111\u1ec3 c\u0103n ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u1ea3nh&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">align \u0111\u1ec3 c\u0103n ch\u1ec9nh \u1ea3nh&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">href \u0111\u1ec3 ch\u00e8n link \u1ea3nh&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">Ho\u1eb7c c\u00e1c thu\u1ed9c t\u00ednh CSS kh\u00e1c&lt;br&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><b><\/b><\/pre>\n<h3><b>Ch\u00e8n background tr\u00ean m\u1ed9t trang\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">T\u01b0\u01a1ng t\u1ef1, n\u1ebfu b\u1ea1n mu\u1ed1n ch\u00e8n \u1ea3nh cho to\u00e0n b\u1ed9 trang, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9 \u0111\u1ecbnh h\u00ecnh n\u1ec1n tr\u00ean ph\u1ea7n t\u1eed &lt;body&gt;, nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">body {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-image: url('img_girl.jpg');<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<b>&lt;h2 style=\"background-color:White;\"&gt;Background Image&lt;\/h2&gt;\r\n<\/b>\r\n<b>&lt;p style=\"background-color:Pink;\"&gt;Ch\u00e8n \u1ea3nh v\u00e0o HTML v\u1edbi thu\u1ed9c t\u00ednh src, ho\u1eb7c s\u1eed d\u1ee5ng width ho\u1eb7c height \u0111\u1ec3 c\u0103n ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u1ea3nh. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng align \u0111\u1ec3 c\u0103n ch\u1ec9nh \u1ea3nh ho\u1eb7c href \u0111\u1ec3 ch\u00e8n link \u1ea3nh. Ho\u1eb7c c\u00e1c thu\u1ed9c t\u00ednh CSS kh\u00e1c&lt;\/p&gt;<\/b>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><b><\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73189\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-10-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"889\" height=\"625\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-10-vippro.jpg 889w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-10-vippro-300x211.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-10-vippro-640x450.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-10-vippro-200x141.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-10-vippro-100x70.jpg 100w\" sizes=\"auto, (max-width: 889px) 100vw, 889px\" \/><\/p>\n<h3><b>Background l\u1eb7p l\u1ea1i\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n ch\u00e8n h\u00ecnh \u1ea3nh nh\u1ecf h\u01a1n ph\u1ea7n t\u1eed, h\u00ecnh \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c l\u1eb7p \u0111i l\u1eb7p l\u1ea1i theo c\u1ea3 chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc cho \u0111\u1ebfn khi ch\u1ea1m \u0111\u1ebfn ph\u1ea7n cu\u1ed1i \u1edf trang web nh\u01b0 sau:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73190\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-11-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"895\" height=\"637\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-11-vippro.jpg 895w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-11-vippro-300x214.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-11-vippro-768x547.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-11-vippro-200x142.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-11-vippro-100x71.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-11-vippro-632x450.jpg 632w\" sizes=\"auto, (max-width: 895px) 100vw, 895px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Do \u0111\u00f3, \u0111\u1ec3 tr\u00e1nh h\u00ecnh n\u1ec1n b\u1ecb l\u1eb7p l\u1ea1i, b\u1ea1n h\u00e3y s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span><b>background-repeat<\/b><span style=\"font-weight: 400;\"> th\u00e0nh <\/span><b>no-repeat<\/b><span style=\"font-weight: 400;\">, c\u1ee5 th\u1ec3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<b>body {<\/b>\r\n<b> \u00a0background-image: url('https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png');<\/b>\r\n<b> \u00a0background-repeat: no-repeat;<\/b>\r\n<b> \u00a0background-color: black;<\/b>\r\n<b>}<\/b>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2 style=\"background-color:White;\"&gt;Background kh\u00f4ng l\u1eb7p l\u1ea1i&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<pre> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73191\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-12-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"894\" height=\"153\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-12-vippro.jpg 894w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-12-vippro-300x51.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-12-vippro-700x120.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-12-vippro-200x34.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-12-vippro-100x17.jpg 100w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><b><\/b><\/pre>\n<h3><b>Background Cover<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n mu\u1ed1n h\u00ecnh n\u1ec1n bao ph\u1ee7 to\u00e0n b\u1ed9 ph\u1ea7n t\u1eed, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span><b>background-size <\/b><span style=\"font-weight: 400;\">\u0111\u1ec3 bao ph\u1ee7 to\u00e0n b\u1ed9. Ngo\u00e0i ra, \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o to\u00e0n b\u1ed9 ph\u1ea7n t\u1eed lu\u00f4n \u0111\u01b0\u1ee3c che ph\u1ee7, b\u1ea1n s\u1eed d\u1ee5ng th\u00eam <\/span><b>background-attachment<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 h\u00ecnh n\u1ec1n kh\u00f4ng b\u1ecb gi\u00e3n v\u00e0 gi\u1eef nguy\u00ean t\u1ef7 l\u1ec7 ban \u0111\u1ea7u.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u1ee5 th\u1ec3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<b>body {<\/b>\r\n<b> \u00a0background-image: url('img_girl.jpg');<\/b>\r\n<b> \u00a0background-repeat: no-repeat;<\/b>\r\n<b> \u00a0background-attachment: fixed;\u00a0\u00a0<\/b>\r\n<b> \u00a0background-size: cover;<\/b>\r\n<b>}<\/b>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Background Cover&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh background-size \u0111\u1ec3 bao ph\u1ee7 to\u00e0n b\u1ed9. S\u1eed d\u1ee5ng th\u00eam background-attachment \u0111\u1ec3 h\u00ecnh n\u1ec1n kh\u00f4ng b\u1ecb gi\u00e3n v\u00e0 gi\u1eef nguy\u00ean t\u1ef7 l\u1ec7 ban \u0111\u1ea7u&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73192\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-13-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"873\" height=\"631\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-13-vippro.jpg 873w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-13-vippro-300x217.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-13-vippro-768x555.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-13-vippro-200x145.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-13-vippro-100x72.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-13-vippro-623x450.jpg 623w\" sizes=\"auto, (max-width: 873px) 100vw, 873px\" \/><\/p>\n<h3><b>C\u0103ng n\u1ec1n (Background Stretch)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n mu\u1ed1n h\u00ecnh n\u1ec1n gi\u00e3n ra \u0111\u1ec3 v\u1eeba v\u1edbi k\u00edch th\u01b0\u1edbc c\u1ee7a trang web, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh thu\u1ed9c t\u00ednh background-size th\u00e0nh 100% 100%, c\u1ee5 th\u1ec3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">body {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-image: url('img_girl.jpg');<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-repeat: no-repeat;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-attachment: fixed;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0<\/span><b> background-size: 100% 100%;<\/b>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Background Image&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;Ch\u00e8n \u1ea3nh v\u00e0o HTML v\u1edbi thu\u1ed9c t\u00ednh src, ho\u1eb7c s\u1eed d\u1ee5ng width ho\u1eb7c height \u0111\u1ec3 c\u0103n ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u1ea3nh. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng align \u0111\u1ec3 c\u0103n ch\u1ec9nh \u1ea3nh ho\u1eb7c href \u0111\u1ec3 ch\u00e8n link \u1ea3nh. Ho\u1eb7c c\u00e1c thu\u1ed9c t\u00ednh CSS kh\u00e1c&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73193\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-14-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"880\" height=\"622\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-14-vippro.jpg 880w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-14-vippro-300x212.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-14-vippro-850x600.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-14-vippro-200x141.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-14-vippro-100x71.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-14-vippro-637x450.jpg 637w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Chen_anh_trong_HTML_su_dung_before_va_after_trong_CSS\"><\/span><b> Ch\u00e8n \u1ea3nh trong HTML s\u1eed d\u1ee5ng ::before v\u00e0 ::after trong CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh s\u1eed d\u1ee5ng <\/span><b>th\u1ebb img trong HTML<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 ch\u00e8n h\u00ecnh \u1ea3nh th\u00ec b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 d\u00f9ng thu\u1ed9c t\u00ednh CSS \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng h\u00ecnh \u1ea3nh. Ph\u1ea7n t\u1eed gi\u1ea3 ::before v\u00e0 ::after trong CSS cho ph\u00e9p b\u1ea1n ch\u00e8n \u1ea3nh trong HTML.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng hai thu\u1ed9c t\u00ednh n\u00e0y, b\u1ea1n ch\u1ec9 c\u1ea7n d\u00f9ng theo c\u00fa ph\u00e1p element:before ho\u1eb7c element:after k\u00e8m theo thu\u1ed9c t\u00ednh content, ngay c\u1ea3 khi n\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ec3 tr\u1ed1ng. Sau \u0111\u00f3, \u0111\u1ec3 ch\u00e8n h\u00ecnh n\u1ec1n v\u00e0o, b\u1ea1n c\u00f3 th\u1ec3 cung c\u1ea5p th\u00eam m\u1ed9t m\u00e0n h\u00ecnh kh\u1ed1i (block display) ho\u1eb7c chi\u1ec1u cao ph\u00f9 h\u1ee3p v\u1edbi h\u00ecnh \u1ea3nh.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p c\u01a1 b\u1ea3n c\u1ee7a hai thu\u1ed9c t\u00ednh nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">.container::before{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0content: '';<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0background: url(image file);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0position:absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0top:0px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0left:0px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.container::after{<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0content: '';<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0background: url(image file);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0position:absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0top:0px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0left:0px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Theo v\u00ed d\u1ee5 sau, ph\u1ea7n t\u1eed gi\u1ea3 ::before s\u1ebd \u0111\u1eb7t h\u00ecnh n\u1ec1n tr\u01b0\u1edbc ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c ch\u1ecdn v\u00e0 n\u1ebfu ph\u1ea7n t\u1eed c\u00f3 m\u00e0u n\u1ec1n d\u01b0\u1ee3c li\u00ean k\u1ebft, thu\u1ed9c t\u00ednh z-index s\u1ebd \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng th\u00eam \u0111\u1ec3 h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb kh\u00f4ng b\u1ecb \u0111\u00e8 l\u00ean n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed cha. C\u1ee5 th\u1ec3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;html lang=\"en\"&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;head&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;meta charset=\"UTF-8\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;meta name=\"viewport\" content= <\/span>\r\n<span style=\"font-weight: 400;\">\"width=device-width, initial-scale=1.0\"&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt; <\/span>\r\n<span style=\"font-weight: 400;\">* { <\/span>\r\n<span style=\"font-weight: 400;\">margin: 0px; <\/span>\r\n<span style=\"font-weight: 400;\">padding: 0px; <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">body { <\/span>\r\n<span style=\"font-weight: 400;\">text-align: center; <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">h1 { <\/span>\r\n<span style=\"font-weight: 400;\">color: green; <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.container { <\/span>\r\n<span style=\"font-weight: 400;\">width: 100vw; <\/span>\r\n<span style=\"font-weight: 400;\">height: 100vh; <\/span>\r\n<span style=\"font-weight: 400;\">display: flex; <\/span>\r\n<span style=\"font-weight: 400;\">justify-content: center; <\/span>\r\n<span style=\"font-weight: 400;\">align-items: center; <\/span>\r\n<span style=\"font-weight: 400;\">color: black; <\/span>\r\n<span style=\"font-weight: 400;\">font-weight: bold; <\/span>\r\n<span style=\"font-weight: 400;\">font-size: 2rem; <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span>\r\n\r\n<b>.container::before { <\/b>\r\n<b>content: ''; <\/b>\r\n<b>background: url('https:\/\/itviec.com\/assets\/logo-itviec-4492a2f2577a15a0a1d55444c21c0fa55810822b3b189fc689b450fb62ce0b5b.png') <\/b>\r\n<b>no-repeat center center\/cover; <\/b>\r\n<b>background-color: black;<\/b>\r\n<b> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position: absolute;\u00a0<\/b>\r\n<b>opacity: 0.3; <\/b>\r\n<b>top: 0px; <\/b>\r\n<b>left: 0px; <\/b>\r\n<b>width: 100vw; <\/b>\r\n<b>height: 100vh; <\/b>\r\n<b>z-index: -1; <\/b>\r\n<b>}\u00a0<\/b>\r\n\r\n<span style=\"font-weight: 400;\">span { <\/span>\r\n<span style=\"font-weight: 400;\">font-size: 2em; <\/span>\r\n<span style=\"font-weight: 400;\">} <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;body&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt; <\/span>\r\n<span style=\"font-weight: 400;\">ITviec Blog&lt;br&gt;&lt;br&gt; <\/span>\r\n<span style=\"font-weight: 400;\">Trang th\u00f4ng tin ph\u00e1t tri\u1ec3n s\u1ef1 nghi\u1ec7p IT c\u1ee7a b\u1ea1n<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt; <\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb c\u1ee7a \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-73194\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-15-vippro.jpg\" alt=\"ch\u00e8n \u1ea3nh trong html - itviec blog\" width=\"886\" height=\"412\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-15-vippro.jpg 886w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-15-vippro-300x140.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-15-vippro-700x326.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-15-vippro-200x93.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-15-vippro-100x47.jpg 100w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, khi s\u1eed d\u1ee5ng ::before v\u00e0 ::after \u0111\u1ec3 th\u00eam h\u00ecnh \u1ea3nh, b\u1ea1n ch\u1ec9 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh nh\u01b0 m\u1ed9t \u1ea3nh n\u1ec1n v\u00e0 kh\u00f4ng th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh h\u00ecnh \u1ea3nh n\u00e2ng cao nh\u01b0 khi s\u1eed d\u1ee5ng &lt;img&gt;.<\/span><\/p>\n<blockquote><p>Xem th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/cac-the-trong-html\/\" target=\"_blank\" rel=\"noopener\"><b>T\u1ed5ng h\u1ee3p 70+ th\u1ebb trong HTML s\u1eed d\u1ee5ng ph\u1ed5 bi\u1ebfn hi\u1ec7n nay<\/b><\/a><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_chen_anh_trong_HTML\"><\/span><b> C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 ch\u00e8n \u1ea3nh trong HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 c\u0103n ch\u1ec9nh khi ch\u00e8n \u1ea3nh trong HTML?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u0103n ch\u1ec9nh h\u00ecnh \u1ea3nh tr\u00ean trang web, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a CSS nh\u01b0 margin, padding hay float, c\u1ee5 th\u1ec3 nh\u01b0 sau:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>margin:<\/b><span style=\"font-weight: 400;\"> X\u00e1c \u0111\u1ecbnh kho\u1ea3ng c\u00e1ch gi\u1eefa \u1ea3nh v\u00e0 c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c tr\u00ean trang web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>padding:<\/b><span style=\"font-weight: 400;\"> Kho\u1ea3ng c\u00e1ch gi\u1eefa n\u1ed9i dung v\u00e0 vi\u1ec1n \u1ea3nh.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>float: <\/b><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh \u1ea3nh n\u1ed5i l\u00ean b\u00ean tr\u00e1i hay b\u00ean ph\u1ea3i c\u1ee7a ph\u1ea7n t\u1eed ch\u1ee9a n\u00f3, l\u00e0m cho n\u1ed9i dung v\u0103n b\u1ea3n ho\u1eb7c c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c bao quanh n\u00f3.<\/span><\/li>\n<\/ul>\n<h3><b>Ch\u00e8n \u1ea3nh trong HTML b\u1ecb m\u00e9o th\u00ec n\u00ean kh\u1eafc ph\u1ee5c nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00f3 m\u1ed9t s\u1ed1 nguy\u00ean nh\u00e2n khi\u1ebfn vi\u1ec7c <\/span><b>ch\u00e8n \u1ea3nh trong HTML<\/b><span style=\"font-weight: 400;\"> b\u1ecb m\u00e9o v\u00e0 kh\u00f4ng hi\u1ec3n th\u1ecb \u0111\u00fang k\u00edch th\u01b0\u1edbc \u1ea3nh nh\u01b0:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc \u1ea3nh kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi k\u00edch th\u01b0\u1edbc \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh trong thu\u1ed9c t\u00ednh weight v\u00e0 height.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ecbnh d\u1ea1ng \u1ea3nh kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 trong tr\u00ecnh duy\u1ec7t web.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">L\u1ed7i m\u00e3 trong \u0111o\u1ea1n HTML.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng CSS ch\u01b0a \u0111\u00fang.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u1ea7n ki\u1ec3m tra l\u1ea1i c\u00e1c nguy\u00ean nh\u00e2n v\u00e0 th\u1ef1c hi\u1ec7n c\u00e1c \u0111i\u1ec1u ch\u1ec9nh ph\u00f9 h\u1ee3p. \u0110\u1ed1i v\u1edbi l\u1ed7i \u0111\u1ecbnh d\u1ea1ng v\u00e0 k\u00edch th\u01b0\u1edbc \u1ea3nh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nh\u1eefng \u0111\u1ecbnh d\u1ea1ng \u1ea3nh ph\u1ed5 bi\u1ebfn h\u01a1n nh\u01b0 JPEG ho\u1eb7c PNG \u0111\u1ec3 c\u00f3 hi\u1ec3n th\u1ecb t\u1ed1t tr\u00ean trang web.<\/span><b><\/b><\/p>\n<h3><b>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh tr\u00ean trang web?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh gi\u00fap trang web c\u1ee7a b\u1ea1n th\u00eam ph\u1ea7n sinh \u0111\u1ed9ng v\u00e0 d\u1ec5 d\u00e0ng thu h\u00fat ng\u01b0\u1eddi d\u00f9ng h\u01a1n. N\u1ebfu m\u1ed9t trang web kh\u00f4ng c\u00f3 h\u00ecnh \u1ea3nh v\u00e0 d\u00e0y \u0111\u1eb7c nh\u1eefng th\u00f4ng tin s\u1ebd d\u1ec5 khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng ch\u00e1n n\u1ea3n c\u0169ng nh\u01b0 kh\u00f4ng c\u00f3 h\u1ee9ng th\u00fa \u0111\u1ec3 tr\u1ea3i nghi\u1ec7m trang web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh s\u1ebd gi\u00fap minh h\u1ecda cho n\u1ed9i dung trang web th\u00eam ph\u1ea7n h\u1ea5p d\u1eabn v\u00e0 tr\u1ef1c quan h\u01a1n. Ngo\u00e0i ra, \u0111\u1ed1i v\u1edbi nh\u1eefng th\u00f4ng tin c\u00f3 s\u1ed1 li\u1ec7u, h\u00ecnh \u1ea3nh s\u1ebd gi\u00fap ng\u01b0\u1eddi \u0111\u1ecdc hi\u1ec3u ch\u00fang m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng h\u01a1n. B\u00ean c\u1ea1nh \u0111\u00f3, c\u00f2n gi\u00fap c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u0169ng nh\u01b0 t\u0103ng l\u01b0\u1ee3ng truy c\u1eadp \u0111\u1ebfn trang web.<\/span><\/p>\n<blockquote><p>Xem th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/front-end-developer-la-gi\/\" target=\"_blank\" rel=\"noopener\"><b>Front End Developer l\u00e0 g\u00ec: L\u00e0m g\u00ec, l\u1ed9 tr\u00ecnh h\u1ecdc t\u1eadp v\u00e0 C\u00f4ng c\u1ee5 l\u00e0m vi\u1ec7c<\/b><\/a><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_cach_chen_anh_trong_HTML\"><\/span><b>T\u1ed5ng k\u1ebft v\u1ec1 c\u00e1ch ch\u00e8n \u1ea3nh trong HTML<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Ch\u00e8n \u1ea3nh trong HTML<\/b><span style=\"font-weight: 400;\"> l\u00e0 k\u1ef9 n\u0103ng c\u01a1 b\u1ea3n v\u00e0 c\u1ea7n thi\u1ebft d\u00e0nh cho c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n web. N\u1eafm v\u1eefng ki\u1ebfn th\u1ee9c v\u1ec1 th\u1ebb &lt;img&gt; c\u00f9ng c\u00e1c thu\u1ed9c t\u00ednh, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng l\u1eadp tr\u00ecnh c\u00e1ch hi\u1ec3n th\u1ecb, k\u00edch th\u01b0\u1edbc c\u0169ng nh\u01b0 c\u0103n ch\u1ec9nh h\u00ecnh \u1ea3nh m\u1ed9t c\u00e1ch t\u1ed1i \u01b0u tr\u00ean trang web. B\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c h\u00e0nh c\u00e1c d\u1ef1 \u00e1n t\u00edch h\u1ee3p h\u00ecnh \u1ea3nh v\u00e0o trang web, \u1ee9ng d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng ph\u00e1p tr\u00ean \u0111\u1ec3 n\u00e2ng cao hi\u1ec7u su\u1ea5t v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng hi\u1ec7u qu\u1ea3 h\u01a1n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u1eafm v\u1eefng ki\u1ebfn th\u1ee9c v\u1ec1 HTML c\u0169ng nh\u01b0 l\u1eadp ra m\u1ed9t l\u1ed9 tr\u00ecnh <\/span><a href=\"https:\/\/itviec.com\/blog\/hoc-html\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">h\u1ecdc HTML<\/span><\/a><span style=\"font-weight: 400;\"> s\u1ebd gi\u00fap b\u1ea1n n\u00e2ng cao k\u1ef9 n\u0103ng, t\u1eeb \u0111\u00f3 m\u1edf r\u1ed9ng c\u01a1 h\u1ed9i th\u0103ng ti\u1ebfn tr\u00ean con \u0111\u01b0\u1eddng tr\u1edf th\u00e0nh m\u1ed9t Front-End Developer chuy\u00ean nghi\u1ec7p.<\/span><\/p>\n<blockquote><p><em>Tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/it-jobs\/html?utm_medium=anchor_text_low&amp;utm_source=blog&amp;utm_campaign=viec_lam_html&amp;utm_content=chen_anh_trong_html\" target=\"_blank\" rel=\"noopener\"><strong>vi\u1ec7c l\u00e0m HTML<\/strong><\/a> m\u1edbi nh\u1ea5t tr\u00ean to\u00e0n qu\u1ed1c<\/em><b><\/b><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>H\u00ecnh \u1ea3nh l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 kh\u00f4ng k\u00e9m ph\u1ea7n quan tr\u1ecdng trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n trang web, gi\u00fap website c\u1ee7a b\u1ea1n t\u0103ng th\u00eam t\u00ednh tr\u1ef1c quan, \u0111\u1ed3ng th\u1eddi c\u1ea3i thi\u1ec7n \u0111\u00e1ng k\u1ec3 tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. V\u1eady c\u00e1ch ch\u00e8n \u1ea3nh trong HTML \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n nh\u01b0 th\u1ebf n\u00e0o? B\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y s\u1ebd [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":73411,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-73139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Ch\u00e8n h\u00ecnh \u1ea3nh v\u00e0o web gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan v\u00e0 n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. B\u00e0i vi\u1ebft t\u1ed5ng h\u1ee3p 3 c\u00e1ch ch\u00e8n \u1ea3nh trong HTML \u0111\u01a1n gi\u1ea3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng\" \/>\n<meta property=\"og:description\" content=\"H\u00ecnh \u1ea3nh l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 kh\u00f4ng k\u00e9m ph\u1ea7n quan tr\u1ecdng trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n trang web, gi\u00fap website c\u1ee7a b\u1ea1n t\u0103ng th\u00eam t\u00ednh tr\u1ef1c quan, \u0111\u1ed3ng th\u1eddi c\u1ea3i thi\u1ec7n\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-14T10:14:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-28T15:32:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-thumbnail-vippro.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2850\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng - ITviec Blog","description":"Ch\u00e8n h\u00ecnh \u1ea3nh v\u00e0o web gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan v\u00e0 n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. B\u00e0i vi\u1ebft t\u1ed5ng h\u1ee3p 3 c\u00e1ch ch\u00e8n \u1ea3nh trong HTML \u0111\u01a1n gi\u1ea3n.","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:\/\/itviec.com\/blog\/chen-anh-trong-html\/","og_locale":"vi_VN","og_type":"article","og_title":"Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng","og_description":"H\u00ecnh \u1ea3nh l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 kh\u00f4ng k\u00e9m ph\u1ea7n quan tr\u1ecdng trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n trang web, gi\u00fap website c\u1ee7a b\u1ea1n t\u0103ng th\u00eam t\u00ednh tr\u1ef1c quan, \u0111\u1ed3ng th\u1eddi c\u1ea3i thi\u1ec7n","og_url":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-06-14T10:14:58+00:00","article_modified_time":"2025-09-28T15:32:38+00:00","og_image":[{"width":2850,"height":1500,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-thumbnail-vippro.png","type":"image\/png"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"18 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng","datePublished":"2024-06-14T10:14:58+00:00","dateModified":"2025-09-28T15:32:38+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/"},"wordCount":4241,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-thumbnail-vippro.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/","url":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/","name":"Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-thumbnail-vippro.png","datePublished":"2024-06-14T10:14:58+00:00","dateModified":"2025-09-28T15:32:38+00:00","description":"Ch\u00e8n h\u00ecnh \u1ea3nh v\u00e0o web gi\u00fap t\u0103ng t\u00ednh tr\u1ef1c quan v\u00e0 n\u00e2ng cao tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. B\u00e0i vi\u1ebft t\u1ed5ng h\u1ee3p 3 c\u00e1ch ch\u00e8n \u1ea3nh trong HTML \u0111\u01a1n gi\u1ea3n.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/chen-anh-trong-html\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-thumbnail-vippro.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/chen-anh-trong-html-thumbnail-vippro.png","width":2850,"height":1500,"caption":"ch\u00e8n \u1ea3nh trong html - th\u1ebb img trong html - itviec"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/chen-anh-trong-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Ch\u00e8n \u1ea3nh trong HTML: T\u1ed5ng h\u1ee3p chi ti\u1ebft c\u00e1c c\u00e1ch s\u1eed d\u1ee5ng"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=73139"}],"version-history":[{"count":2,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73139\/revisions"}],"predecessor-version":[{"id":91801,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73139\/revisions\/91801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/73411"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=73139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=73139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=73139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}