안녕하세요. 웹사이트를 처음 만들어보는 초보입니다. 공부를 위해 기존에 있는 사이트를 보고 따라 만들어보고 있습니다.
크롬 창의 크기를 줄여보니 그림도 비례해서 같이 줄어들어버리네요.. 창의 크기를 줄였을때 비율이 두 번째 그림과 같이 되어야합니다.(이미지가 다른 것은 신경쓰지 않으셔도 됩니다. 공부용으로 따라만드는 것이라 다른 이미지입니다.)
세번째 이미지는 화면을 줄이기 전의 화면입니다.
<div id="bgd"></div>
<div id="content" class="container-max">
<h1>We are #500 Strong</h1>
<p>Meet our badass, global family of startup founders, mentors, and investors</p>
<a href="#home" id="your-move"><strong>start here</strong></a>
body {
font-family: 'Open Sans', sans-serif;
}
#bgd {
position: absolute;
background-image: url("img/1.jpg");
background-size: 121%;
background-repeat: no-repeat;
top:0;
left:0;
bottom:0;
right:0;
height: auto;
min-height: 1500px;
}
.container-max{
max-width: 1200px;
}
#content {
color: #f2f2f2;
position: relative;
margin-left: 18%;
margin-top: 9.5%;
}
#content h1 {
font-family: "Exo 2","Helvetica Neue",Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
font-size: 74px;
margin: 1.25em 0 0.2em;
letter-spacing: -2px;
}
#content p {
margin: 0 0 1.313em;
font-size: 20px;
font-weight: 300;
}
#content #your-move {
text-decoration: none;
text-transform: uppercase;
color: #f2f2f2;
border: 1px solid #ac1100;
border-color: #b43322;
background-color: #b43322;
display: inline-block;
padding: 19px;
font-size: 19px;
}
#content #your-move:hover {
border-color: #891e1b;
background-color: #891e1b;
}