PC 및 모바일 버전 헤더 검정색 부분 배경이미지로 넣기
본문
안녕하세요 그누보드로 홈 작업하다 막혀서 문의드립니다.
어찌보면 정말 초보적인 질문이라 ...그래도 제겐 어려워서 ㅠㅠ
이부분을 해결할려고 Q&A에 검색 해봤는데 해결책이 없어서
질문 올려 도움요청 드립니다.
그누보드5 맨위 상단 검정색 부분을 모두 제거하고 해당부분에
"배경이미지(background)이미지"를 넣고자 합니다.
여러차례 시도해 봤는데 해당부분이 해결되지않아 답답해서 글올립니다. ㅠㅠ
아래는 원래 원본인데 해당 스크린샷의 검은색 부분입니다.
검색폼은 로그인폼 하단으로 위치를 이동시켜서 해결됬고
남은 바탕의 검정색 부분을 배경이미지로 대체하고자 합니다.
아래 이미지처럼 변경하려고 합니다.
일반적인 img src의 이미지 삽입이 아닌 background img로 넣으려고 합니다.
답변 1
여기서는 상단을 배경이미지로 채우는 방법을 질문 하셨으므로 따로 용어에 대한 설명은 하지 않겠습니다. 궁금하시면 따로 구글이나 네이버에 찾아보시기 바랍니다.
pc버전 설명 드릴께요
배경색 바꾸고 상단 로그인 부분도 깔끔하게 날리고 기존 그누보드 로고를 큰 이미지로 대체하는 방법으로 해볼께요.
<div id="hd_wrapper"> 여기 부분에서 아래 로고 부분 제외하고 나머지 코드를 날립니다.
다른 코드를 날리시면 안됩니다.
그러면 상단 로그인쪽을 날리게 됩니다.
<div id="logo">
<a href="<?php echo G5_URL ?>"><img src="<?php echo G5_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>"></a>
</div>
그다음에 default.css를 갑니다.
71번째 줄쯤 보면 이렇게 되어 있을겁니다. 이게 상단 배경색 부분입니다.
#212020이 검은색을 나타내는 컬러 코드 입니다.
이거를 하얀색을 나타내는 컬러코드 #fff로 바꿉니다.
#hd{background:#212020}
81번 줄쯤에 로고 관련 css가 있습니다. 여기서 padding을 지웁니다.
마지막으로
가로 1200px 세로 140px 이미지를 구하거나 기존 이미지를 인터넷에 이미지 사이즈 조절 하는걸로
사이즈를 조절합니다. 그 다음 이름을 logo.png로 바꿉니다.
그 다음에 img 폴더에 logo.png를 업로드를 합니다. 이미 기존 로고 파일이 있으니까. 덮어 쓸꺼냐고 물어보면 덮어 쓰시고 사이트에 접속해서 ctrl + f5를 눌러 캐시를 지우는 새로고침을 해봅니다.
img폴더는 메인 폴더에 있습니다.
이렇게 하면 결과가 이렇게 나오겠내요.
!-->!-->