body에 background, background-images 사용하기

CSS의 항목인 background를 활용하는 여러가지 방법

Background를 활용해 보아요.의 첫번째 예제.
HTML 문서의 배경에 색상과 이미지를 적용해 보자.

설명

HTML문서의 바탕에 색상을 넣거나 배경 이미지를 커다랗게 깔아야할 경우.

기존의 방식

이렇게 body에 직접 유효하지 않은 bgcolor 코드와 style을 입력하는 경우가 많다.

 

배경색 설정하기

배경 이미지 설정하기 (고정된 이미지 한 개 사용)

배경 이미지 설정하기 (이미지 한 개를 반복해서 패턴으로 사용)

배경색과 이미지를 함께 배경에 설정하기

최종 예제 파일 보기

위의 모든 예제를 포함 한 파일 보기

 

repeat등 기본값이 정해져 있는 속성의 경우 따로 지정하지 않아도 되나, 배경 이미지를 사용하면서 단축속성을 사용할 경우는 배경 색상을 입력하지 않으면 validator에서 warning을 띄운다.

관련 링크

예제에 사용한 배경 이미지의 출처는 squidfingers patterns.

#

목록으로Web Tech