Tìm kiếm
0398.259.259
Liên hệ
Blog
Kiến thức về website
Kiến thức SEO website
Kiến thức HTML
Kiến thức CSS
Kiến thức PHP
Kiến thức MySQL
Kiến thức JavaScript
Tên miền
Hosting
Thiết kế website
Giới thiệu
Trang chủ
Trang chủ
Giới thiệu
Thiết kế website
Hosting
Tên miền
Blog
Kiến thức về website
Kiến thức SEO website
Kiến thức HTML
Kiến thức CSS
Kiến thức PHP
Kiến thức MySQL
Kiến thức JavaScript
Liên hệ
0398.259.259
Thuộc tính background-position-x canh giữa, gần full hình trong CSS
Thuộc tính background-position-x canh giữa, gần full hình trong CSS
Thuộc tính background-position-x canh giữa, gần full hình trong CSS
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html> <html> <head> <title>Thuộc tính background-position-x canh giữa, gần full hình trong CSS</title> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .hero-image { background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg"); background-color: #cccccc; height: 500px; background-position-x: center; /*Căn giữa hình ảnh theo chiều ngang*/ background-repeat: no-repeat; background-size: cover; /* Thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa */ position: relative; } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } </style> </head> <body> <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">BÙI TẤN LỰC</h1> <h3>Người Sáng lập Web Mới</h3> <button>Xem Ngay</button> </div> </div> <h1>Thuộc tính background-position-x canh giữa, gần full hình trong CSS</h1> <p>Xin chào</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>Thuộc tính background-position-x canh giữa, gần full hình trong CSS</title> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .hero-image { background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg"); background-color: #cccccc; height: 500px; background-position-x: center; /*Căn giữa hình ảnh theo chiều ngang*/ background-repeat: no-repeat; background-size: cover; /* Thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa */ position: relative; } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } </style> </head> <body> <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">BÙI TẤN LỰC</h1> <h3>Người Sáng lập Web Mới</h3> <button>Xem Ngay</button> </div> </div> <h1>Thuộc tính background-position-x canh giữa, gần full hình trong CSS</h1> <p>Xin chào</p> </body> </html>
Thuộc tính background-position-x canh giữa, gần full hình trong CSS
nằm trong bài viết
Thuộc tính background-position-x trong CSS
0398.259.259
Messenger
Chỉ Đường
Gọi điện
