Daily coding
CSS : 배경이미지 반복 본문
* background
: 어트리뷰트를 사용하면 배경이미지를 설정하고 이미지 반복여부 등을 지정할 수 있다
- background-image: url ( '이미지 주소'); ---> 원하는 이미지를 배경으로 세팅
- background-repeat : 배경이미지의 반복여부를 설정 (default : 바둑판식)
1. repeat-x : 가로로만 반복
2. repeat-y : 세로로만 반복
3. none : 반복없음
- background-position : 배경사진의 위치를 지정할 수 있다. (위, 아래, 왼, 오, 가운데 )
top/bottom , right, center, left (2개의 속성을 동시에 지정도 가능 예 - top left )
- background-size : 배경화면의 사이즈를 정할 수 있다.
* 웹 브라우져의 사이즈에 맞추어 배경이미지 출력하기
body{
/*화면에 맞추어 이미지를 배경에 넣기 */
background: url('./imagesCss/back.jpg') center center fixed no-repeat;
-webkit-background-size:cover;
-o-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}
- webkit : 구글크롬, 사파리에 적용
- o : 오페라에 적용
- moz : 모질라에 적용
- ms : 익스플로러에 적용 (기본적임, 생략함)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background-image: url('https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&auto=format&fit=crop&w=655&q=80'); width:60%;
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>'Front-end > Client' 카테고리의 다른 글
| JQuery : JQuery 기본 및 임포트 (0) | 2020.01.10 |
|---|---|
| CSS : include 사용해보기 (0) | 2020.01.10 |
| CSS : Gradient 만들기 (linear-gradient) (0) | 2020.01.10 |
| CSS : header 헤더 / main 메인 / footer 푸터 태그 (0) | 2020.01.10 |
| CSS : 화면분할과 정렬(float) (0) | 2020.01.10 |
