그누보드 QA - 오늘의 숙제 입니다


#wrapper {
    z-index: 5;
    margin: 0 auto;
    width: 970px;
    /* border-right: 1px solid #dde4e9; */
    /* border-left: 1px solid #dde4e9; */
    zoom: 1;
}

기존 css 내용을 위의 내용처럼 주석처리하면 선은 사라질것입니다

그리고 가운데 정렬은......
이미지가 body 배경 이미지로 들어가 있더군요

기존 body css를

(아마도 메인쪽이나 헤더쪽)


<div id="wrapper">
    <div id="container">
<style type="text/css">
body{ background-image:url(http://cleanapp.cafe24.com/img/222.jpg  );
background-repeat:no-repeat
</style>

의 body style 를 아래처럼 바꿔보세요

제안1


<style type="text/css">
body{ background-image:url(http://cleanapp.cafe24.com/img/222.jpg  );
background-repeat:no-repeat;
background-size: 1600px 1078px;
background-position: center 110px;
</style>

제안1 적용시 실제 이미지 사이즈 크기를 중심으로 가운데 정렬이 됩니다
머리가 가려져서 위에서 110px 만큼 떨어뜨린 겁니다 (background-position: center 110px; )

제안2


<style type="text/css">
body{ background-image:url(http://cleanapp.cafe24.com/img/222.jpg  );
background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
background-position: center 110px;
</style>

제안2 적용시 아래처럼 이미지실제 사이즈보다 모니터 화면에 꽉차게 가로폭이 커집니다