background-image 속성은 html 태그에 배경 이미지를 지정한다. 태그의 크기보다 이미지 크기가 작다면 자동으로 반복되는데 반복 속성은 background-repeat 속성을 이용하면 된다. 만약, 반복을 중단하고 싶다면 background-repeat 속성에 no-repeat 값을 주고 이미지가 반복적으로 보여주는 것을 중단할 수 있다.
html 태그 배경 이미지 반복 속성 사용하기
using html tag background image repeat attribute
웹페이지의 배경으로 이미지를 설정하는 방법으로 css 스타일을 이용할 수 있다.
css 스타일의 background-image 속성을 이용하면 특정 태그에 배경 이미지를 넣을 수 있다.
기본값은 repeat 이기 때문에 이미지보다 태그의 크기가 크다면 이미지는 같은 이미지를 반복한다.
이미지 크기보다 태그의 크기가 작다면 이미지는 잘려진다.
background-image 스타일 속성은 이미지 크기에 상관없이 태그의 크기에 따라 보여주게 된다.
css 스타일을 이용해 화면에 이미지를 표시하는 방법은 이전의 내용을 참고해 본다.
css 스타일 background-repeat
스타일을 이용해 이미지르 보여주고자 할 때 가장 잘 표현되는 것이 body 태그이다.
body 태그의 범위는 웹브라우저에 보이는 화면 전체를 표현하기에 이미지가 반복되는지 볼 수 있다.
이미지의 반복여부를 나타내는 속성은 background-repeat 속성이다. 이 속성은 기본적으로 repeat 으로 태그의 크기가 이미지보다 크다면 이미지는 자동으로 반복해서 보여준다.
반복을 중단하고자 한다면 no repeat 속성으로 반복을 멈추면 된다.
아래는 태그에 이미지를 표현하고 반복을 멈추는 구문을 표현한다.
background-image: url('이미지 url');
background-repeat: no-repeat;샘플코드
태그에 배경이미지를 설정하고 반복 속성을 확인해 보자.
배경을 표시하는 css 스타일은 background-image 를 사용한다.
background-image 는 기본값이 자동 반복이기 때문에 이미지 크기가 태그 크기보다 작다면 이미지는 반복적으로 보이게 된다.
반복을 멈추려면 background-repeat 속성에 no-repeat 를 설정한다.
코드를 보자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
#bgBody {
background-image: url('box.png');
background-repeat: no-repeat;
}
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body id="bgBody">
</body>
<!-- // -->
</html>
<!-- // -->이미지를 배경으로 사용하기 위해 body 태그를 사용하였다.
backgound-image 스타일은 p 태그나 dive 태그 등에도 사용될 수 있다.
body 태그에 이미지를 사용하고 반복을 중단하는 속성을 주었다.
만약 background-repeat 속성이 없다면 이미지는 body 태그 전체인 웹브라우저 화면전체에 이미지가 나타날 것이다.
결과 화면을 보자.
'programming > web' 카테고리의 다른 글
| html 파비콘 link 태그 사용하기 using html link tag for favicon (0) | 2022.06.16 |
|---|---|
| html 이미지 picture 태그 사용 해상도별 여러 이미지 표시하기 using html picture tag (0) | 2022.06.13 |
| html 배경 이미지 사용하기 using html background image (0) | 2022.06.07 |
| html 이미지 맵 사용 using html image map (0) | 2022.06.03 |
| html 이미지에 링크 연결 하기 how to link image to link in html (0) | 2022.06.01 |
댓글