CSS STEP 23 - Background

★ Background

• 1. background-color
• 2. background-image
• 3. background-repeat
• 4. background-position
• 5. background-attachment

 

■ 네이버 로고 가져오기

• https://www.naver.com/

네이버

• F12 개발자 모드 > 요소 선택 하단에 링크
• https://s.pstatic.net/static/www/img/uit/sp_main_947f65.png
• 이미지 파일 가져와서 보고 싶은 해당 로고 보이기

 

■ 로고 보이기

#logo {
    width:445px;
    height: 110px;
    background-image: url(images/naver.png);
    background-position: 0px -312px;
}

• 실행 결과

실행 결과

 

■ 버튼 보이기

#btn {
    width : 270px;
    height: 100px;
    background-image: url(images/naver.png);
    background-position: -540px -110px;
    cursor:pointer;
}

#btn:hover {
    background-position: -540px -220px;
}

• 실행 결과

실행 결과

 

■ 새로운 옵션

• background-size : 배경 이미지 크기를 지정 (너비, 높이)

 background-size : 400px 400px;

• 종횡비 깨짐을 방지하려면

background-size : 100% auto;

• 이미지가 잘려도 되니까 영역을 다채워넣어라

background-size : cover;

• 종횡비가 깨지지 않고, 이미지도 짤리지 않게 넣어라

background-size : contain;

 

■ 전체 배경 넣기

html {
    background-image: url(images/gimbal.jpg);
    background-repeat: no-repeat;
    background-position : center center;
    background-size : cover;
}