나는 이때까지 background-color : 로 배경색을 입혔었다
이제는 배경 이미지를 넣어보자
내가 그림판으로 대충 아무런 이미지를 만들었다
이 이미지 파일을 가지고 background-img 속성으로 적용해보자
이렇게 url속성으로 경로를 지정해 줬다
이렇게 하나의 이미지가 가로 세로 반복되서 나오는걸 볼 수 있다
만약 내가 이 이미지를 가로로만 백그라운드에 적용하고 싶으면
background-repeat: 이라는 속성으로
속성값은 repeat-x; 값을 준다
x축에만 적용한다는 뜻이다
세로축인 y값도 있다
이렇게 y축에만 적용할 수 있다
요기서 만약 나는 x축y축 (가로,세로) 필요없이
딱 이미지 크기만큼만 쓰겠다고 하면
no-repeat; 값을 적용하면 된다
이 이미지의 위치도 변경할 수 있다
그때는 background-position: 속성을 쓴다
속성값 center;는 가운데
center top;은 가운데에서 제일 위(상단) 라는 뜻이다
은 왼쪽의 위(상단)
요기서 앞에 있는게 x축 뒤에 있는게 y축을 의미한다
center center은 x축도 가운데 y축도 가운데
이미지가 홈페이지에서 정중앙에 위치하게 된다
또다른 방법도 있다
내가 원하는 px단위만큼 위치를 지정해 줄 수 있다
이렇게 값을 주면 오른쪽의 20px 맨위에서의 50px만큼 띄울 수 있다
background-attachment: ; 속성
컨텐츠 영역이 있을때 스크롤을 내리면 배경이미지가 같이 스크롤이 될지 말지 결정하는 속성이다
fixed; 값은 스크롤을 내려도 배경이미지가 항상 그자리에 고정된다는 값이다
스크롤을 내려보면
이렇게 이미지가 지정한 자리에서 고정되어 있다
scroll; 값은 스크롤을 내리면 같이 스크롤된다 는 뜻이다
스크롤을 내리면
이렇게 같이 스크롤되서 안보이는걸 볼 수 있다
내가 위에서 입력했던 속성들을 한번에 적용할 수도 있다
이렇게 그냥 background 속성에
이 순서대로 값을 적용시키면 한번에 속성값들을 적용시킬 수 있다
attachment: 값은 background 속성 밑에 따로 값을 지정해 줘야한다
'css' 카테고리의 다른 글
| HTML 요소의 위치 정의 (2) | 2023.09.09 |
|---|---|
| border 스타일링 (0) | 2023.09.08 |
| CSS 박스 모델과 요소의 크기 (0) | 2023.09.08 |
| 표 스타일링 (0) | 2023.09.08 |
| 링크와 커서 스타일링 (0) | 2023.09.08 |
