코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 Backgrounds</title> <style> div { border: 3px solid black; padding: 20px; margin-bottom: 20px; } h2{ color: DeepPink; } #origin { background: url(/examples/images/img_monitor.png); background-repeat: no-repeat; } #resize { background: url(/examples/images/img_monitor.png); background-size: 200px 110px; background-repeat: no-repeat; } </style> </head> <body> <h1>background-image 속성을 이용한 크기 조정</h1> <div id="origin"> <h2>배경 이미지의 원래 크기</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu nibh in lacus elementum varius ac in urna. In vitae enim nunc. Donec at elit molestie, commodo sapien ac, venenatis diam. Sed augue eros, consectetur quis urna at, pellentesque faucibus arcu. Nunc sed lorem et metus rutrum interdum. Ut mauris lectus, lobortis ac tempus non, aliquam non ex. Ut dui ante, rhoncus ut ornare quis, blandit vitae quam. Quisque accumsan eu nulla vel vestibulum. Vestibulum ac aliquam mauris. Phasellus ipsum elit, scelerisque ut dui quis, tristique vehicula risus. Suspendisse vitae leo ac nibh commodo interdum.</p> </div> <div id="resize"> <h2>배경 이미지의 크기 조절</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu nibh in lacus elementum varius ac in urna. In vitae enim nunc. Donec at elit molestie, commodo sapien ac, venenatis diam. Sed augue eros, consectetur quis urna at, pellentesque faucibus arcu. Nunc sed lorem et metus rutrum interdum. Ut mauris lectus, lobortis ac tempus non, aliquam non ex. Ut dui ante, rhoncus ut ornare quis, blandit vitae quam. Quisque accumsan eu nulla vel vestibulum. Vestibulum ac aliquam mauris. Phasellus ipsum elit, scelerisque ut dui quis, tristique vehicula risus. Suspendisse vitae leo ac nibh commodo interdum.</p> </div> </body> </html>
