728x90
반응형
background |
|
<body> white (default) 외 다른 요소들은 투명 | |
SYNTAX <태그명 style="background: 속성값1 속성값2 ...;> 단축 <태그명 style="background-속성명:속성값; ... ;> |
|
color image size repeat no-repeat attachment position vw vh fixed |
background 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Backgrounds</title>
</head>
<!-- <body background=".../img/img_scream.jpg"> -->
<body style="background:#000; width:100%; height:1500px; margin:0; padding:0;">
<!-- <body style="background-image: url(https://mblogthumb-phinf.pstatic.net/MjAyMDAzMDVfMjYz/MDAxNTgzMzc5NzI5MTEw.0aLi8pMoeOWs6MsFO4ja_HxUpnAZlgX09ERe5Bg7WH0g.XBcOzAgJ5vaZKmdMIA31FeTpsd0A6cjwdLm7XuX_La4g.GIF.jiwon840324/1583379725048.gif?type=w800);"> -->
<h1 style="background-color:rgba(255,255,0,1.0);">색상으로 배경설정2</h1>
<h1 style="background-color:hsla(360,100%,50%,100%);">색상으로 배경설정3</h1>
<h1 style="background-color:transparent;color:#ffffff;">색상으로 배경설정4</h1>
<h1 style="color:#ffffff">배경없음5</h1>
<h1 style="background: url(https://mblogthumb-phinf.pstatic.net/MjAyMDAzMDVfMjYz/MDAxNTgzMzc5NzI5MTEw.0aLi8pMoeOWs6MsFO4ja_HxUpnAZlgX09ERe5Bg7WH0g.XBcOzAgJ5vaZKmdMIA31FeTpsd0A6cjwdLm7XuX_La4g.GIF.jiwon840324/1583379725048.gif?type=w800);background-size: 10px;">배경으로 이미지 삽입하기</h1>
<h1 style="color:white; background-image: ">줌ZOOOOOM <br><br><br>좋아요!</h1>
</body>
</html>
back.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>배경 속성</title> </head> <!-- <body style="background-image: url('../img/namu.png'); background-repeat:no-repeat; background-position: right bottom;"> --> <body style="background-image: url('../img/namu.png'); background-repeat:no-repeat; background-position: right bottom; width:100%; height:100%;"> <!-- <body style="background-image: url('../img/namu.png'); background-repeat:no-repeat; background-position: right bottom; width:100vw; height:100vh;"> --> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <p>끝 부분입니다.^^</p> </body> </html>
s
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>배경 속성</title> </head> <!-- <body style="background-image: url('../img/namu.png'); background-repeat:no-repeat; background-position: right bottom;"> --> <!-- <body style="background-image: url('../img/namu.png'); background-repeat:no-repeat; background-position: right bottom; width:100%; height:100%;"> --> /* % 적용 안 됨 */ <body style="background-image: url('../img/namu.png'); background-repeat:no-repeat; background-position: right bottom; width:100vw; height:100vh;"> /*브라우저 기준 고정된 사이즈, 위치에*/ <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <h1>Hello World!</h1> <p>background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> <p>끝 부분입니다.^^</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>배경속성-shorthand</title> </head> <body style="background: #ff0012 url('../img/img_tree.png') no-repeat right top fixed;"> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> <h1>The background Property</h1> <p>The background 속성은 모든 것을 지정하기 위한 축약 속성입니다. 하나의 선언에 있는 배경 속성입니다. </p> <p>여기서 배경 이미지는 한 번만 표시되며, 위치는 오른쪽 상단 구석에 지정됩니다.</p> <p>또한 텍스트가 배경 이미지를 덮어쓰지 않도록 텍스트를 짧게 처리하였습니다.</p> </body> </html>
728x90
반응형
'[CSS]' 카테고리의 다른 글
[CSS] hover 가상클래스( : ) 선택자 (0) | 2024.02.20 |
---|---|
[CSS] selector (0) | 2024.02.20 |
[CSS] div (0) | 2024.02.19 |
[CSS] border (0) | 2024.02.19 |
[CSS] style, color, font (0) | 2024.02.19 |