반응형
기본 배경
#b1{
background-color:lavender;
}
배경 반복
이미지는 작은 이미지를 넣어야 반복된다. (아래에 이미지 공유)
#b2{
background-image:url("../img/star.png")
}
X축만 반복
#b3{
background-image:url("../img/star.png");
background-repeat: repeat-x;
}
Y축만 반복
#b4{
background-image:url("../img/star.png");
background-repeat: repeat-y;
}
반복 없이 위치 지정
#b5{
background-image:url("../img/star.png");
background-repeat:no-repeat;
background-position: right bottom;
}
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
input[type = button]{
width:400px;
height:200px;
}
#b1{
background-color:lavender;
}
#b2{
background-image:url("../img/star.png")
}
#b3{
background-image:url("../img/star.png");
background-repeat: repeat-x;
}
#b4{
background-image:url("../img/star.png");
background-repeat: repeat-y;
}
#b5{
background-image:url("../img/star.png");
background-repeat:no-repeat;
background-position: right bottom;
}
</style>
</head>
<body>
<input type="button" id="b1" value = "button1"><br/>
<input type="button" id="b2" value = "button2"><br/>
<input type="button" id="b3" value = "button3"><br/>
<input type="button" id="b4" value = "button4"><br/>
<input type="button" id="b5" value = "button5"><br/>
</body>
</html>
이미지 공유
반응형
