편집 기록

프로필 박기선님의 편집

날짜2016.06.05

이미지를 페이지에 여백없이 채우는 방법

web

css

안녕하세요. 웹사이트를 처음 만들어보는 초보입니다. 공부를 위해 기존에 있는 사이트를 보고 따라 만들어보고 있습니다.

크롬 창의 크기를 줄여보니 그림도 비례해서 같이 줄어들어버리네요.. 창의 크기를 줄였을때 비율이 두 번째 그림과 같이 되어야합니다.(이미지가 다른 것은 신경쓰지 않으셔도 됩니다. 공부용으로 따라만드는 것이라 다른 이미지입니다.)

세번째 이미지는 화면을 줄이기 전의 화면입니다.

<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;
}

프로필 알 수 없는 사용자님의 편집

날짜2016.06.03

RWD웹을 만들때 background이미지 조절하는 방법을 잘 모르겠습니다.

web

안녕하세요. 웹사이트를 처음 만들어보는 초보입니다. 공부를 위해 기존에 있는 사이트를 보고 따라 만들어보고 있습니다.

세번째 이미지는 화면을 줄이기 전의 화면입니다.

<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;
}