[HTML] 배경이미지 한번 반복하기 > ⓘ 웹

본문 바로가기
사이트 내 전체검색


회원로그인

ⓘ 웹

[HTML] 배경이미지 한번 반복하기

페이지 정보

작성자 SDJ 작성일17-05-21 00:45 조회2,079회 댓글0건

본문

 글쓴이 : Jin (121.137.222.51)     날짜 : 08-01-16 15:53     조회 : 7700    

 


<style type="text/css">
<!--
body {
 background-attachment: scroll;
 background-color: #000000;
 background-image: url((배경이미지경로/파일명.gif));
 background-repeat: no-repeat;
 background-position: left center;   
}
-->
</style>

위 내용에 대해 간략하게 설명드리면
background-attachment: scroll; 이부분은 배경까지 같이 스크롤 되게 하는 옵션입니다..만약 배경 화면을 그대로 고정하시고자 한다면
fixed로 지정해주면 되구여..
background-color: #000000; 이부분은 배경색상을 지정해주는 부분입니다.
background-image: url((배경이미지경로/파일명.gif));  배경으로 사용할 이미지를 지정하는 부분입니다.
background-repeat: no-repeat;  이부분은 원하시던 기능인 배경을 반복시키지 않고 한번만 나오게 하는 기능입니다.
만약 가로로만 반복하게 하고자 한다면 repeat-x 세로로만 반복하게 하고자 한다면 repeat-y 전체 반복은 repeat 로 주시면 됩니다.
background-position: left center;    이부분은 배경을 고정했을때 어느 위치에 나오게 할것인지를 지정하는 부분입니다..
첫번째 left는 가로 정렬을 말하는거고 두번째 center는 세로 정렬을 말합니다.. 각각의 옵션은

가로일때는 (left, center, right)가 있고 세로일때는 top, center, bottom이 있습니다..



 

<ex>


<style>
.body {
 background-attachment: scroll;
 background-color: #ffffff;
 background-image: url(lab2.jpg);
 background-repeat: no-repeat;
 background-position: left top;   
}
</style>
<html>
<head>
<title>예진이닷컴 ♡ YeJin2.com</title>
</head>
<body class=body>
<p align="right">
<br>
<a href="http://yejin2.com" target="_top">YeJin2.com</a>
<br>
2007.04.17~
<br>
<br>


 

 

 

 

 

 

 

댓글목록

등록된 댓글이 없습니다.

ⓘ 웹 목록

Total 3건 1 페이지
게시물 검색

접속자집계

오늘
478
어제
379
최대
1,010
전체
353,311
회사소개 개인정보취급방침 서비스이용약관 Copyright © sdj.kr All rights reserved.
상단으로
모바일 버전으로 보기