CSS 배경 이미지:단계별 가이드

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

태그를 정의했습니다. 이 태그는 웹페이지에 "Welcome to the Coffee Grind"라는 텍스트를 표시합니다.

CSS 파일에서 "이미지"라는 HTML 클래스에 대한 규칙을 정의했습니다. 이것은 배너의 배경 이미지를 설정하고 배너의 높이를 250px로 설정합니다. 그런 다음 헤더의 텍스트 스타일을 지정하는 데 사용되는 "헤더"라는 클래스를 정의했습니다.

"header" 클래스는 헤더 텍스트 상단에 50px 패딩을 적용합니다. "header" 클래스는 텍스트의 색상을 흰색으로 설정합니다. 우리 스타일은 헤더의 글꼴 크기를 20px로 설정하고 헤더를 요소의 중앙에 정렬합니다.

CSS 여러 배경 이미지

background-image 속성을 사용하면 CSS의 요소에 여러 배경 이미지를 할당할 수 있습니다. 여러 배경 이미지를 사용하는 구문은 다음과 같습니다.

background-image: url(image1), url(image2);

지정된 첫 번째 이미지는 요소의 맨 위에 표시되고 후속 요소는 서로 뒤에 표시됩니다. 배너 전면에 커피잔 아이콘을 추가하고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

코드 반환:

보시다시피 배경 이미지 앞에 커피 컵 아이콘이 추가되었습니다. 아이콘은 배경 이미지 목록에서 첫 번째 배경 이미지로 지정했기 때문에 전면에만 나타납니다.

배경 이미지 크기

background-image 속성으로 작업할 때 컨테이너 내 배경 이미지의 크기를 사용자 정의할 수 있습니다. 이를 위해 background-size 속성이 사용됩니다.

background-size 속성은 네 가지 가능한 값을 허용합니다. 다음과 같습니다.

• 자동:이 값은 웹 브라우저가 배경 이미지에 가장 적합한 크기를 결정하도록 합니다(기본값).
• Contain:이 값은 실제 이미지 크기가 컨테이너를 채우지 않더라도 표시되어야 함을 브라우저에 지시합니다. 그림이 너무 작아서 컨테이너를 채울 수 없는 경우 전체 크기로 나타납니다. 그림이 채울 수 없는 영역에는 공백이 남습니다.
• 커버:이 값은 브라우저가 이미지를 전체 컨테이너의 크기로 늘리도록 지시합니다.
• 길이:배경 이미지의 너비와 높이입니다. 지정된 첫 번째 값은 이미지의 너비를 설정하고 두 번째 값은 높이를 설정합니다.

배경 크기 변경

이전의 커피 배너 이미지가 요소 내에 포함되기를 원한다고 가정합니다. 이는 컨테이너를 채우지 않더라도 전체 이미지가 표시되어야 함을 의미합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 250px;
}

코드 반환:

보시다시피 첫 번째 예와 달리 전체 배경 이미지가 표시됩니다. 이는 코드에서 background-size 속성을 지정하고 해당 값을 contain으로 설정했기 때문입니다. . 또는 커버를 사용할 수도 있습니다. 이미지가 전체 컨테이너의 크기를 덮도록 하려면 값입니다.

이미지의 픽셀 크기를 지정할 수도 있습니다. 스타일 이미지를 높이 200px, 너비 200px로 하고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 200px;
	width: 200px;
}

코드 반환:

이 예에서 이미지는 너비가 200픽셀, 길이가 200픽셀입니다.

위치 배경 이미지

background-origin 속성을 사용하면 웹 요소의 콘텐츠, 테두리 또는 패딩에 따라 배경 이미지를 배치할 수 있습니다.

background-origin 속성은 다음 세 가지 값을 허용합니다.

• 테두리 상자:테두리 상자를 기준으로 표시할 이미지의 위치를 ​​지정합니다.
• 콘텐츠 상자:콘텐츠 상자를 기준으로 표시할 이미지의 위치를 ​​지정합니다.
• 여백 상자:여백 상자를 기준으로 표시할 이미지의 위치를 ​​지정합니다(기본값).

테두리, 콘텐츠 및 패딩에 대해 자세히 알아보려면 CSS 상자 모델에 대한 가이드를 읽어보세요.

이미지의 위치를 ​​조정하고 싶다고 가정해 보겠습니다. 예를 들어 다음 코드를 사용하여 콘텐츠 상자를 기준으로 배경 이미지가 나타나도록 할 수 있습니다.

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	border: 10px solid black;
	padding: 25px;
	background-origin: content-box;
	background-repeat: no-repeat;
	height: 250px;
}

코드 반환:

이 예에서 배경 이미지는 콘텐츠 상자를 기준으로 나타납니다. 보시다시피 이미지 테두리와 배경 이미지 사이에 흰색 간격이 있습니다. 이것은 이미지가 나타나는 상대적인 배경 위치를 보여줍니다.

background-origin:content-box 속성을 지정하여 이를 달성했습니다. background-repeat:no-repeat 속성을 지정했습니다. 이 속성은 이미지를 콘텐츠 상자로 제한합니다. background-origin 속성에 의해 생성된 여백에는 이미지가 나타나지 않습니다.

결론

background-image 속성을 사용하여 CSS에서 요소의 배경을 이미지로 설정합니다. 이 기술을 사용하면 이미지에서 사용자 정의 배경을 만들 수 있습니다. 이것은 색상이나 그라디언트를 사용하는 대신 사용할 수 있습니다.

이 기사에서는 background-image 속성을 사용하는 방법과 CSS에서 배경 이미지의 스타일을 지정하는 방법에 대해 논의했습니다. 이제 전문가처럼 CSS에서 배경 이미지 디자인을 시작하는 데 필요한 지식을 얻었습니다.