반응형
image full screen css - How TO - Full Page Image
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page
Tryit Editor v3.6
body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: co
www.w3schools.com
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
반응형
'프로그래밍 > Style & Design' 카테고리의 다른 글
| [Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램 (0) | 2021.11.26 |
|---|---|
| [bootstrap] 27 Best Free Bootstrap Admin Templates 2021 (0) | 2021.11.04 |
| [CSS] 중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까? (0) | 2021.06.09 |
| html table css 참고 (0) | 2021.04.29 |
| [WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가? (0) | 2021.04.20 |
