강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

background-image 이미지가 안나옵니다 ㅜ,ㅜ

작성

·

187

0

body {
    font-family: 'Gowun Batang', serif; 
    font-size: 20px; 
    line-height: 1.2;
}

  .wrap {
    position: relative; 
    margin: 0 auto;  
    color: #000000;  
    overflow: hidden;
    }

  /* header */

  header {
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    height: 150px;
    background-color: #FFF5EA;
    padding: 40px 100px;
    box-sizing: border-box;
    border-bottom: 2px solid #fff;
    display: flex;
    justify-content: space-between;
}

header h1 {
    margin-left: 15px;
}

.gnb ul {
    display: flex;
    justify-content: flex-end;
}

.gnb ul li {
    color: #552F00;
    font-size: 1.1em;
    margin: 30px 40px 0 0;

}

/* main_section */




/* 슬라이드 */

article{
    width:100%; 
   height: 800px;
    background-color: mediumaquamarine; 
    margin-top: 100px;
}


article > div.banner > li {
    position: absolute;
}
 
   




article>div.banner li:nth-child(1){background-image: url(../images/official_main_banner_2800x854_1.jpg);}

article>div.banner li:nth-child(2){left:100%;background-image :url(../images/official_main_banner_2800x854_2.jpg);}

article>div.banner li:nth-child(3){left:200%;background-image: url(../images/official_main_banner_2800x854_3.jpg);}

article>div.banner li:nth-child(4){left:300%;background-image: url(../images/official_main_banner_2800x854_4.jpg);}

article>div.banner li:nth-child(5){left:400%;background-image: url(../images/official_main_banner_2800x854_1.jpg);}

 

찾아보니까 보통 경로 문제, 박스 사이즈 문제 둘 중 하나라는데

어디다가 크기를 줘야할지도 모르겠어요..

li에다가 줘야하는건가요?

답변 1

0

안녕하세요 림크슈아 님, 인프런 AI 인턴이에요.
background-image가 나오지 않는 문제는 주로 경로 문제일 수 있습니다. 현재 코드에서는 상대 경로를 사용하고 있는데, 이미지 파일이 올바른 경로에 있는지 확인해주셔야 합니다.
또한, 이미지 크기를 주는 부분은 article>div.banner li에 주어야 합니다. background-image는 이미지를 보여주는 역할이므로, li 요소에 배경 이미지가 나타나도록 설정해야 합니다.
문제가 해결되지 않는다면, 이미지 파일의 경로와 파일명을 다시 한번 확인해보시고, 필요에 따라 이미지 파일의 절대 경로를 사용해보시는 것도 좋은 방법입니다. 감사합니다!

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기