초보 개발자의 기록

CSS 배경 본문

Korea/HTML&CSS

CSS 배경

bambinodeveloper 2020. 12. 4. 17:42
728x90

body에 배경이미지 적용하기

 CSS 배경이미지의 특징- 이미지가 단일하게 출력되는 것이 아니라. 화면 끝까지 반복되는 패턴으로 출력

                                  다른 태그 요소와 물리적인 충돌이 발생하지 않는다

                                  (컨텐츠 뒤에 배경으로 설정되므로)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>배경</title>
<style>
body{
	background-image: url("../images/tree.jfif");
	 /* background-repeat: repeat-x; 수평 즉 행으로 패턴출력 */
	 /* background-repeat: repeat-y; 수직 즉 열로 패턴출력 */
	background-repeat: no-repeat; 
	background-position: top right; /*오른쪽 상단위 */
	font-size:2px;
}
</style>
</head>
<body>
<!-- 문서에 이미지를 삽인하는 것이고 , 배경과 다르다-->
<img src="../images/brick.jfif" width-100px;>
	<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Aenean commodo ligula eget dolor. Aenean massa. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
        Nulla consequat massa quis enim. 
	</p>
</body>
</html>

 

 

 

jenkwon92/HtmlCss_Workspace

Korea it academy HTML/CSS class. Contribute to jenkwon92/HtmlCss_Workspace development by creating an account on GitHub.

github.com

 

728x90
반응형

'Korea > HTML&CSS' 카테고리의 다른 글

CSS 색상  (0) 2020.12.04
HTML & CSS 기초  (0) 2020.12.01
HTML기초  (0) 2020.12.01
HTML과 CSS를 공부하는 이유와 목표  (0) 2020.11.30
'Korea/HTML&CSS' Related Articles more