웹 페이지에서 배경 이미지 위에 내비게이션 메뉴를 배치하면 시각적으로 매력적인 헤더를 만들 수 있습니다. CSS의 background 속성을 활용하면 별도의 <img> 태그 없이도 컨테이너에 배경 이미지를 적용하고, 그 위에 메뉴 링크를 자연스럽게 올릴 수 있습니다.
CSS로 이미지 위에 내비게이션 메뉴 구현하기
다음은 CSS를 사용하여 이미지 위에 내비게이션 메뉴를 추가하는 전체 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0px;
margin-top:10px;
padding: 0px;
}
nav{
width: 50%;
background-color: rgb(23, 104, 43);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(129, 123, 123);
}
.selected{
background-color: rgb(0, 56, 42);
}
.image-nav{
background:url('https://i.picsum.photos/id/652/1366/1366.jpg');
min-height: 400px;
padding: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 70%;
}
</style>
</head>
<body>
<div class="image-nav">
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</div>
</body>
</html>코드 주요 부분 설명
- .image-nav 클래스:
background속성으로 배경 이미지를 지정하고,background-size: cover를 사용해 이미지가 컨테이너 전체를 꽉 채우도록 설정합니다.min-height와padding으로 메뉴가 들어갈 충분한 공간을 확보합니다. - nav 요소: 너비를 50%로 지정하고 초록색 배경을 적용했으며,
overflow: auto로 내용이 넘칠 경우 자동으로 스크롤이 생성되도록 합니다. - .links 클래스:
display: inline-block으로 링크들을 가로 방향으로 나열하고, 여백과 흰색 텍스트, 밑줄 제거 등으로 메뉴 항목의 기본 스타일을 정의합니다. - .links:hover: 마우스 포인터를 메뉴 위에 올리면 배경색이 회색으로 바뀌는 호버 효과를 제공합니다.
- .selected 클래스: 현재 선택된(활성화된) 메뉴 항목을 진한 녹색 배경으로 강조하여 사용자가 현재 위치를 쉽게 파악할 수 있게 합니다.
출력 결과
위 코드를 실행하면 배경 이미지 위에 내비게이션 메뉴가 표시됩니다. 마우스를 각 메뉴 항목에 올리면 배경색이 변경되고, 'Home'처럼 selected 클래스가 적용된 메뉴는 다른 색상으로 강조되어 현재 페이지임을 나타냅니다.