css3 전체 크기 배경 이미지
css3 전체 크기 배경 이미지
이제 우리는 항상 전체 브라우저 창을 커버하는 웹 사이트에 배경 이미지를 갖고 싶습니다.
요구 사항은 다음과 같습니다.
1. 전체 페이지를 이미지로 채 웁니다 (공백 없음).
2. 필요에 따라 이미지 크기 조정
3. 페이지 중앙 이미지
4.스크롤 막대를 발생시키지 마십시오.
다음 예제에서는이를 수행하는 방법을 보여줍니다.
html 요소를 사용하십시오 (html 요소는 항상 적어도 브라우저 창의 높이입니다).
그런 다음 고정 된 가운데 놓인 배경을 설정하십시오.
그런 다음 background-size 속성을 사용하여 크기를 조정합니다.
예
html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}
전체소스
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 3168 | |
| 3167 | |
| 3166 | |
| 3165 |
HTML
HTML5 로컬 저장소
|
| 3164 |
HTML
HTML5 드래그 앤 드롭
|
| 3163 | |
| 3162 |
HTML
YouTube 동영상 ID
|
| 3161 |
HTML
HTML 도우미 (플러그인)
|
| 3160 | |
| 3159 |
HTML
HTML5 비디오
|
| 3158 |
HTML
HTML 멀티미디어 오디오 형식
|
| 3157 |
HTML
HTML 멀티미디어
|
| 3156 |
기타
Google 아이콘
|
| 3155 |
기타
부트 스트랩 아이콘
|
| 3154 |
기타
아이콘을 추가하는 방법
|
| 3153 | |
| 3152 |
반응형
부트 스트랩 <abbr>
|
| 3151 |
반응형
부트 스트랩 <mark>
|
| 3150 | |
| 3149 |
반응형
부트 스트랩의 기본 설정
|
| 3148 |
반응형
부트 스트랩 그리드 시스템
|
| 3147 |
CSS
왼쪽에 툴팁 나오게 하는 소스
|
| 3146 | |
| 3145 |
CSS
css를 이용한 툴팁만들기
|
| 3144 | |
| 3143 | |
| 3142 | |
| 3136 |
CSS
css 이미지 갤러리
|
| 3135 |
CSS
CSS 드롭 다운
2
|
| 3134 |
CSS
css 기본 툴팁
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기