반응형
CSS 배경에 이미지 넣기
background-image를 활용하여 배경에 이미지를 넣을 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body {
background-image:url("eximages.jpg");
}
h1 {
background-color: white;
color:red;
}
div {
background-color: white;
color:blue;
}
p {
background-color: white;
color:green;
}
</style>
</head>
<body>
<h1>CSS 배경 예시</h1>
<div>
여기는 오직 div안
<p>div내부 단락</p>
</div>
<p>여긴 단락</p>
</body>
</html>
택스트가 잘 보이도록 배경을 설정해줘야한다.
위는 안좋은 예시이다.
단락안에 배경 이미지 넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
h1 {
background-color: white;
color:red;
}
div {
background-color: white;
color:blue;
}
p {
background-image:url("eximages.jpg");
}
</style>
</head>
<body>
<h1>CSS 배경 예시</h1>
<div>
여기는 오직 div안
<p>div내부 단락</p>
</div>
<p>여긴 단락</p>
</body>
</html>
background-repeat
background-repeat을 하게될 경우 배경 이미지가 반복이 된다.
background-repeat: repeat-x의 경우 x축으로 반복이 되며 repeat-y의 경우 y축으로 반복이 된다.
만약 no-repeat를 입력할 경우 반복이 되지않는다.
아래는 repeat-x에 관한 예시이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body{
background-image: url("eximages.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1 style="color: white";>배경색상</h1>
</body>
</html>
background-position
background-position을 통해 배경이미지의 위치를 지정할 수 있다.
아래의 코드는 배경 이미지를 오른쪽에 지정한 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body{
background-image: url("eximages.jpg");
background-repeat: no-repeat;
background-position: right;
}
</style>
</head>
<body>
<h1>배경색상</h1>
</body>
</html>
background-attachment
배경 이미지를 고정시킬 수 있다.
background-attachment: fixed 할 경우 스크롤을 내려도 이미지와 같이 내려온다.
예제코드
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body{
background-image: url("eximages.jpg");
background-repeat: no-repeat;
background-position: right;
background-attachment: fixed;
background-size:50%;
}
</style>
</head>
<body>
<h1>배경색상</h1>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
<p>아래로 스크롤 해보세요!</p>
</body>
</html>
반응형
'웹프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] 높이 너비 최대-너비(Height, Width, Max-width) (0) | 2023.09.11 |
|---|---|
| [CSS] 다양한 border 속성들 알아보기 (0) | 2023.09.10 |
| [CSS] CSS Backgrounds 배경 꾸미는 법 (0) | 2023.09.10 |
| [CSS] CSS 주석달기 (0) | 2023.09.09 |
| [CSS] CSS 추가하는 3가지 방법(External CSS, Internal CSS, Inline CSS) (0) | 2023.09.09 |
댓글