백그라운드에 이미지 넣는방법
본문
안녕하세요 이곳에서 정말 많이 배우고 있지만 한참 부족한 초보입니다.
style.css 수정중입니다.
제일 하단에 상담 신청폼이 있는데요.
지금은 단순히 하늘색 배경으로만 되어있는데
백그라운드로 이미지를 넣어보고싶습니다.
섹션4로 분리되어있는것같은데 이곳에 배경 이미지로 넣으려면 어떻게 해야할지
조언 부탁드리겠습니다.
/*마지막 하단 텍스트*/
.section.section4 .text5{
font-size: 38px;
letter-spacing: -3px;
line-height: 50px;
color: #0a2793;
font-family: "NanumGothic";
font-weight: 400;
text-align: center;
}
.section.section4 .form_wrapper{
display: block;
}
.section.section4 .submit_form{
margin-top: 2rem; margin-bottom: 2rem;
text-align: left;
display:inline-block;
padding: 1rem 3rem;
background-color: gray;
width: 892px;
height: 454px;
background-color: #ebeced;
}
.section.section4 .input_wrap{
width: 49%;
display: inline-block;
}
.section.section4 label{
font-size: 29px;
letter-spacing: -3px;
line-height: 50px;
color: #000000;
font-family: "Nanum Barun Gothic Ultra Light";
font-weight: 300;
}
.section.section4 input{
width: 40%;
height: 40px;
font-size: 15px;
text-align: center;
float: right;
margin-right: 3rem;
border: none;
background: #ffffff;
outline: none;
}
.section.section4 .top_input, .section.section4 .bot_input{
display: block;
margin-bottom: 2rem;
border-bottom: 1px solid rgba(126,124,124,0.5019607843137255);
}
.section.section4 .fot_input{
text-align: center;
}
.section.section4 .fot_input .checkbox{
width: 34px;
height: 34px;
float: none;
margin-right: 1rem;
}
.section.section4 .fot_input span , .section.section4 .fot_input input{
vertical-align: middle;
}
.section.section4 .fot_input span{
display: inline-block;
font-size: 29px;
letter-spacing: -2px;
line-height: 50px;
color: #000000;
font-family: "Nanum Barun Gothic Ultra Light";
font-weight: 300;
}
.section.section4 #submit_btn{
cursor: pointer;
margin-top: 2rem;
display: inline-block;
padding: 0.7rem 0.5rem;
border-radius: 1rem;
font-size: 46px;
letter-spacing: -5px;
line-height: 50px;
color: #ffffff;
font-family: "Nanum Barun Gothic Bold";
font-weight: 800;
text-align: center;
background-color: #e30c0c;
}
#apply_btn, #submit_btn{
cursor: pointer;
}
.footer{
background: #2f2f2f;
text-align: center;
color: #ffffff;
padding-top: 2rem;
padding-bottom: 2rem;
position: relative;
height: 250px;
}
.footer_wrap{
display: table;
text-align: center;
width: 100%;
}
.footer_text{
display: inline-block;
vertical-align: middle;
height: 100%;
}
.footer_img{
margin-left: 2rem;
display: inline-block;
height: 100%;
vertical-align: middle;
}
답변 2
style.css 86번째 줄에 있는
background-color:#c8e2fd;
이 부분을
background: url('이미지 경로') center center no-repeat;
이런형태로 하시면 됩니다.
center center 이 항목은 좌측은 가로, 우측은 세로 배치에 대한 설정(background-position) 이고
no-repeat;은 반복여부(background-repeat) 입니다. 백그라운드 속성은 검색해 보시면 많이 나오니까
찾아서 적용하시면 됩니다.
페이지를 봐야 정확히 알수있지만,,
아마 예상하는 바로는
#wrap {
background-image : url('이미지경로/이미지파일이름.jpg');
}
#wrap 쪽이지 않을까 싶네요..
알려주신대로 적용했더니 바로 되네요. 정말 감사드립니다^^
