By GokiSoft.Com| 22:14 22/05/2020|
Tài Liệu HTML

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

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.


Tags: