HTML Background Images - Hình nền trong HTML

by GokiSoft.Com - 22:14 22/05/2020 26,872 Lượt Xem

Một hình nền có thể được xác định gần như trên mọi thành phần HTML.

Hình nền trên một thành phần HTML

Để thêm một hình nền trên một phần tử HTML, sử dụng thuộc tính style của HTML và thuộc tính background-image của CSS:

ví dụ

Thêm một hình nền trên một thành phần HTML:

<div style="background-image: url('img_girl.jpg');">

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<div style="background-image: url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>

Bạn cũng có thể xác định hình nền trong thành phần <style> :

ví dụ

Xác định hình nền trong thành phần style:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

<!DOCTYPE html>
<html>
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
<body>

<h2>Background Image</h2>

<div>
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>

Hình nền trên một trang

Nếu bạn muốn toàn bộ trang phải có hình nền, bạn phải xác định hình nền trên thành phần <body> :

ví dụ

Thêm một hình nền trên trang HTML:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

<body>

<h2>Background Image</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>
</html>

Lặp lại hình nền

Nếu một hình nền nhỏ hơn thành phần, hình ảnh sẽ tự lặp lại, cả về chiều ngang lẫn dọc, cho đến khi nó chạm đến cuối của thành phần:

ví dụ

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

<body>

<h2>Background Repeat</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>
</html>

Để tránh các hình nền tự lặp lại chính nó, sử dụng thuộc tính background-repeat.

ví dụ

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

<body>

<h2>Background No Repeat</h2>

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

</body>
</html>

Hình nền bao phủ

Nếu bạn muốn hình nền bảo phủ toàn bộ thành phần, bạn có thể đặt thuộc tính
background-size thành cover.

Đồng thời, để đảm bảo toàn bộ thành phần sẽ luôn được bao phủ, đặt thuộc tính background-attachment thành fixed.

ví dụ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the BODY element.</p>

</body>
</html>

Co dãn hình nền

Nếu bạn muốn kéo dãn hình nền cho phù hợp với toàn bộ hình ảnh trong thành phần, bạn có thể đặt thuộc tính background-size thành 100% 100%:

ví dụ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%r" and the background image will be stretched to cover the entire element, in this case the BODY element.</p>

</body>
</html>

Học thêm CSS

Trong ví dụ trên bạn đã được học rằng hình nền có thể được tạo kiểu bằng cách sử dụng các thuộc tính hình nền của CSS.

Để học thêm về các thuộc tính CSS, hãy tìm hiểu CSS Tutorial.

Ứng Dụng Học

Theo dõi cập nhật nội dung học trên Youtube & Facebook

Thông Tin Liên Hệ

Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.

Website: https://gozic.vn

SĐT: 096 - 70 25 996

Email: ziczacgroup@gmail.com

Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website

Tags:

html5 học html tài liệu html hoc html5 va css

Bình luận

Tôi muốn xem code từ thành viên khác

Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích

MD5 Chuyển Đổi Chữ Hoa - UpperCase JSON Editor Coding Online Database Diagram Fake API Base64

Tài Liệu Môn Học

Nhập Môn HTML

Tìm Hiểu Thẻ HTML5

CSS

Table & CSS

Form & CSS

Thiết Kế Layout