2. Sử dụng CSS nhúng. Nó được tham chiếu bằng cách sử dụng phần lớp hoặc Id

Hình nền có thể được thực hiện bằng cách sử dụng các thuộc tính như

• Bối cảnh Lặp lại. Phương pháp này đi kèm với hình nền và chỉ định cách hình nền có lặp lại hay không. Nó nhận một số giá trị có thể như no-repeat [không lặp lại hình ảnh], repeat-x[xếp hình ảnh theo chiều ngang], repeat-y[xếp hình ảnh theo chiều dọc]
• vị trí nền. Điều này cuối cùng chỉ định vị trí của hình nền sẽ được định vị với các giá trị được lấy như trên, dưới, phải, trái, giữa và sự kết hợp của các giá trị này [ví dụ:. phía dưới bên trái]. Các giá trị ngang và dọc có thể được kết hợp theo bất kỳ nhu cầu nào
• kích thước nền. Nó chỉ định kích thước của hình ảnh được đặt và cho phép kiểm soát kích thước. Sau đây là các giá trị được gán cho kích thước nền
• tự động. Đó là kích thước giá trị mặc định
• chiều dài. nó cho phép chỉ định chiều rộng và chiều cao của hình ảnh bằng pixel [10 px 30px]
• che. Thu phóng hoàn toàn hình nền theo đó một khu vực của một phần tử được bao phủ bởi toàn bộ hình nền, tránh một số phần của hình ảnh bằng cách thu nhỏ nó
• tỷ lệ phần trăm. Chỉ định chiều rộng và chiều cao của hình ảnh theo tỷ lệ phần trăm. [10% 30%]
• Trung tâm. hình ảnh được đặt ở trung tâm

Hình nền không thể là bất kỳ hình ảnh tĩnh nào, chúng tôi cũng có thể cung cấp hình ảnh chuyển động như gif động

Ví dụ để triển khai ảnh nền CSS

Dưới đây là ví dụ về Ảnh nền CSS

Ví dụ 1

Ví dụ này đặt hình nền hoàn toàn

Mã số

trở lại. html

body {
background-image: url[background.jpg];
background-color: coral;
}



Demo on CSS. Welcome to our Page!

đầu ra

Cùng mã với việc thay đổi chiều cao và chiều rộng của hình ảnh. Ảnh gốc được thu nhỏ trong trang theo thông số kỹ thuật. đây là mã đặt thành các pixel được xác định

Mã số

ff. html

Mã số

ff. css

.dem1{
width:900px;
height:300px;
margin:auto;
}
.dem2{
width:50%;
height:80%;
}

đầu ra

Ví dụ #2

Đặt hai hình nền

Mã số

body {
background-image: url[tenor.jpg], url[paper.jpg];
background-color: coral;
}



Demo on CSS. Welcome to our Page!

đầu ra

Ví dụ #3

Chỉ định nền yêu cầu thuộc tính hình ảnh, kích thước như cách chúng tôi đã chỉ định trong lớp #bg1. Và cung cấp phần CSS trên thân bao gồm mã HTML đầy đủ để vừa với màn hình cửa sổ

Mã số

#bg1 {
border: 1px solid black;
padding: 20px;
background: url[wind.png];
background-repeat:no-repeat;
background-size: auto;
}
#bg2 {
border: 1px solid black;
padding: 20px;
background: url[wind.png];
background-repeat: no-repeat;
background-size: 500px 200px;
}



background-image demo using Size Property

This is my Web Page
The original size is set to the background

Example specifying the Width

Here is my next page
Well, the dimensions are specified here

đầu ra

Ví dụ #4

Đặt nền kích thước đầy đủ với vị trí

Mã số

 Full Background image 


body, html {
height: 100%;
margin: 1;
}
.full {
background-image: url["harry.jpg"];
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}




This demo shows full-height image by setting the container and scaling them perfectly to the screen

  

Sử dụng CSS, chúng ta phải điều chỉnh hình ảnh vừa với màn hình bằng cách đặt kích thước thuộc tính để che

đầu ra

Ví dụ #5

Sử dụng Tỷ lệ khung hình chính xác với thuộc tính Border

Mã số

Phù hợp. html

 With the exact Aspect Ratio 

Mã số

css

Vì vậy, là một hình ảnh gốc không bị mờ trong khi chia tỷ lệ hình ảnh cho phù hợp với khu vực. Đây là kết quả cho đoạn mã trên

đầu ra

Ví dụ #6

Thêm bìa văn bản trên hình nền

Mã số

Phù hợp. html

Creating an HTML PAge with Background Image

body {
font-family: "Calibri", cursive;
font-size: 14px;
color: #036;
}
h1,h2,h3 {
font-family: Arial,Comic Sans MS, sans-serif;
font-size: 14px;
font-weight: bold;
}
html {
background: url[harry.jpg] no-repeat centercenter fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#desk { width: 500px; margin: 40px auto; padding: 22px; background: white; -moz-box-shadow: 0 0 22px black; -webkit-box-shadow: 0 0 22px black; box-shadow: 0 0 22px blue; }




Creating an HTML PAge with Background Image
This is a way to add background image for a web page using html. 

In this case I used:

html {

background: url [harry.jpg] no-repeat centercenter fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

scales entire Background. 

đầu ra

Phần kết luận

Do đó, trong hướng dẫn này, chúng ta đã thấy một cách đơn giản để viết mã hình ảnh bằng CSS, đồng thời chúng ta cũng đã học được cách hình ảnh đó phù hợp với màn hình. Hình nền với CSS cung cấp các tính năng tốt cho trang web và các nhà thiết kế web cảm thấy hài lòng với chủ đề của họ. Vì vậy, ở cuối phần này, bạn sẽ có thể tùy chỉnh các tác phẩm với nỗ lực tốt

Bài viết được đề xuất

Đây là hướng dẫn về Ảnh nền CSS. Ở đây chúng tôi thảo luận về tổng quan ngắn gọn về Ảnh nền CSS và các ví dụ khác nhau của nó cùng với việc triển khai mã của nó. Bạn cũng có thể xem qua các bài viết được đề xuất khác của chúng tôi để tìm hiểu thêm –

Làm cách nào để đặt hình ảnh làm CSS nền?

Làm cách nào để thêm hình nền trong CSS mà không cần URL?

Làm cách nào để đặt hình nền trong div?