Hướng dẫn css background image full screen - ảnh nền css toàn màn hình

Tìm hiểu cách tạo một hình nền trang đầy đủ với CSS.

Hình ảnh toàn trang

Tìm hiểu cách tạo một hình ảnh nền bao gồm toàn bộ cửa sổ trình duyệt. Ví dụ sau đây cho thấy hình ảnh nền đáp ứng toàn màn hình [và nửa màn hình]:

Demo - Hình nền toàn trang

Demo - Hình ảnh nền nửa trang

Cách tạo hình ảnh chiều cao đầy đủ

Sử dụng một phần tử container và thêm hình ảnh nền vào thùng chứa với

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

Lưu ý: Để đảm bảo rằng hình ảnh bao gồm toàn bộ màn hình, bạn cũng phải áp dụng

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

Thí dụ

cơ thể, html {& nbsp; & nbsp; chiều cao: 100%;}
  height: 100%;
}

.bg {& nbsp; / * Hình ảnh được sử dụng */& nbsp; Hình ảnh nền: URL ["img_girl.jpg"];
  /* The image used */
  background-image: url["img_girl.jpg"];

& nbsp; / * Chiều cao đầy đủ */& nbsp; Chiều cao: 100%;
  height: 100%;

& nbsp; / * Trung tâm và mở rộng hình ảnh đẹp */& nbsp; Định vị nền: Trung tâm;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Hãy tự mình thử »

Hình nền nửa trang:

Làm thế nào để tôi đặt một hình ảnh làm toàn bộ nền trong HTML?

Bài đăng này ban đầu được xuất bản vào ngày 21 tháng 8 năm 2009 và hiện được cập nhật vì nó đã được sửa đổi hoàn toàn. Cả hai phương pháp ban đầu đều được loại bỏ và bây giờ được thay thế bằng bốn phương pháp mới.

Mục tiêu ở đây là một hình ảnh nền trên một trang web bao gồm toàn bộ cửa sổ trình duyệt mọi lúc. Hãy để một số chi tiết cụ thể trên đó:

• Lấp đầy toàn bộ trang với hình ảnh, không có khoảng trắng
• Hình ảnh tỷ lệ khi cần thiết
• Giữ lại tỷ lệ hình ảnh [tỷ lệ khung hình]
• Hình ảnh tập trung trên trang
• Không gây ra cuộn giấy
• Trình duyệt chéo tương thích càng tốt
• Là một số shenanigans lạ mắt như flash

Tuyệt vời, dễ dàng, CSS tiến bộ

Chúng ta có thể làm điều này hoàn toàn thông qua CSS nhờ vào tài sản

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

html { 
  background: url[images/bg.jpg] no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Hoạt động trong:

• Safari 3+
• Chrome bất cứ điều gì+
• Tức là 9+
• Opera 10+ [Opera 9.5 được hỗ trợ kích thước nền nhưng không phải là từ khóa]
• Firefox 3.6+ [Firefox 4 hỗ trợ phiên bản có tiền tố không phải là nhà cung cấp]

CẬP NHẬT: Cảm ơn Goltzman trong các bình luận đã chỉ ra một bài viết kết nối của nhà phát triển Adobe có một số mã để làm cho IE làm nền tảng cũng như: Thanks to Goltzman in the comments for pointing out an Adobe Developer Connection article which features some code to make IE do cover backgrounds as well:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

Nhưng cẩn thận, người đọc Pierre Orsander cho biết họ đã thử điều này và có một số vấn đề với các liên kết trên trang sẽ chết.

CẬP NHẬT: Matt Literland viết để nói rằng bất kỳ ai cố gắng sử dụng các bộ lọc IE ở trên và gặp sự cố với Scrollbars hoặc liên kết chết hoặc bất cứ điều gì khác [như Pierre ở trên] nên thử không sử dụng chúng trên phần tử

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

Kỹ thuật chỉ CSS #1

Cảm ơn rất nhiều, như thường lệ, đến Doug Neiner cho phiên bản thay thế này. Ở đây, chúng tôi sử dụng một yếu tố nội tuyến, sẽ có thể thay đổi kích thước trong bất kỳ trình duyệt nào. Chúng tôi đặt một

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Bit đặc biệt thông minh là sử dụng truy vấn phương tiện để kiểm tra xem cửa sổ trình duyệt có nhỏ hơn hình ảnh không và sử dụng phần trăm kết hợp-bên trái và âm trái

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Đây là CSS:

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Hoạt động trong:

• Bất kỳ phiên bản trình duyệt tốt nào: Safari / Chrome / Opera / Firefox
• Tức là 6: borked - nhưng có thể có thể sửa được nếu bạn sử dụng một số loại shim định vị cố định
• Tức là 7/8: chủ yếu là hoạt động, trung tâm không có kích thước nhỏ nhưng lấp đầy màn hình tốt
• Tức là 9: hoạt động

Xem bản demo

Kỹ thuật chỉ CSS #2

Một cách khá đơn giản để xử lý điều này là đặt một hình ảnh nội tuyến trên trang, cố định vị trí nó ở phía trên bên trái và cho nó một

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

.bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

Tuy nhiên, điều này không tập trung vào hình ảnh và đó là một mong muốn khá phổ biến ở đây, vì vậy, chúng ta có thể sửa nó bằng cách gói hình ảnh trong một div. Đó là div, chúng tôi sẽ làm lớn gấp đôi cửa sổ trình duyệt. Sau đó, hình ảnh sẽ được đặt, vẫn bảo tồn tỷ lệ khung hình của nó và bao phủ cửa sổ trình duyệt có thể nhìn thấy và trung tâm chết của điều đó.

.bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
.bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Tín dụng cho Corey Worrell cho khái niệm về điều này.

Hoạt động trong:

• Bất kỳ phiên bản trình duyệt tốt nào: Safari / Chrome / Opera / Firefox
• Tức là 6: borked - nhưng có thể có thể sửa được nếu bạn sử dụng một số loại shim định vị cố định
• Tức là 7/8: chủ yếu là hoạt động, trung tâm không có kích thước nhỏ nhưng lấp đầy màn hình tốtfail in the same way [wrongly positioned, not sure why]
• Tức là 9: hoạt động

Xem bản demo

Kỹ thuật chỉ CSS #2 Trying to get this to work on Android? JL García wrote to me saying he needed to add height: 100%; and overflow: hidden; to the html element to get it to work. The full snippet being:

html {
  background: url[images/bg.jpg] no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

Một cách khá đơn giản để xử lý điều này là đặt một hình ảnh nội tuyến trên trang, cố định vị trí nó ở phía trên bên trái và cho nó một

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Tuy nhiên, điều này không tập trung vào hình ảnh và đó là một mong muốn khá phổ biến ở đây, vì vậy, chúng ta có thể sửa nó bằng cách gói hình ảnh trong một div. Đó là div, chúng tôi sẽ làm lớn gấp đôi cửa sổ trình duyệt. Sau đó, hình ảnh sẽ được đặt, vẫn bảo tồn tỷ lệ khung hình của nó và bao phủ cửa sổ trình duyệt có thể nhìn thấy và trung tâm chết của điều đó.

Tín dụng cho Corey Worrell cho khái niệm về điều này.

Safari / Chrome / Firefox [didn kiểm tra rất xa, nhưng các phiên bản gần đây vẫn ổn]

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

Tức là 8+

Hoạt động trong:

• Opera [bất kỳ phiên bản nào] và IE đều thất bại theo cùng một cách [định vị sai, không chắc tại sao]
• Peter Vanwylen đã viết để nói rằng nếu bạn thêm hình ảnh qua JavaScript, IMG cần phải có chiều rộng: tự động; và chiều cao: Tự động; để làm việc trong IE 8, 9 hoặc 10.

Xem bản demo

Kỹ thuật chỉ CSS #2 Reader Craig Manley writes in with a technique to load an appropriately sized background image according to screen. As in, don’t load some huge 1900px wide background image for an iPhone.

Một cách khá đơn giản để xử lý điều này là đặt một hình ảnh nội tuyến trên trang, cố định vị trí nó ở phía trên bên trái và cho nó một

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and [max-width: 1024px] { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

Tuy nhiên, điều này không tập trung vào hình ảnh và đó là một mong muốn khá phổ biến ở đây, vì vậy, chúng ta có thể sửa nó bằng cách gói hình ảnh trong một div. Đó là div, chúng tôi sẽ làm lớn gấp đôi cửa sổ trình duyệt. Sau đó, hình ảnh sẽ được đặt, vẫn bảo tồn tỷ lệ khung hình của nó và bao phủ cửa sổ trình duyệt có thể nhìn thấy và trung tâm chết của điều đó.

Tín dụng cho Corey Worrell cho khái niệm về điều này.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader[src='.myBackground.jpg', sizingMethod='scale'];
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader[src='myBackground.jpg', sizingMethod='scale']";

Safari / Chrome / Firefox [didn kiểm tra rất xa, nhưng các phiên bản gần đây vẫn ổn]

Tức là 8+

Opera [bất kỳ phiên bản nào] và IE đều thất bại theo cùng một cách [định vị sai, không chắc tại sao]

Peter Vanwylen đã viết để nói rằng nếu bạn thêm hình ảnh qua JavaScript, IMG cần phải có chiều rộng: tự động; và chiều cao: Tự động; để làm việc trong IE 8, 9 hoặc 10.

CẬP NHẬT Tháng 1 năm 2018: Cố gắng làm cho việc này hoạt động trên Android? JL García viết cho tôi nói rằng anh ta cần thêm chiều cao: 100%; và tràn: ẩn; đến phần tử HTML để làm cho nó hoạt động. Đoạn trích đầy đủ:

• Tôi đã thử nghiệm nó, và nó có vẻ hoàn toàn chính xác. Không có nó / với nó.
• Phương pháp jQuery

Làm cách nào để tạo một hình ảnh nền phù hợp với toàn bộ CSS màn hình?

Làm thế nào để tôi đặt một hình ảnh làm toàn bộ nền trong HTML?

Làm cách nào để thêm hình ảnh nền vào toàn bộ trang web?

Làm cách nào để tạo toàn màn hình CSS?