CSS에 배경 이미지 추가
이 튜토리얼에서는 CSS에 배경 이미지를 추가하는 방법을 소개합니다. 또한 배경 이미지를 추가할 때 일반적인 실수가 무엇인지 설명합니다.
이미지와 CSS 파일이 같은 폴더에 있을 때 CSS에 배경 이미지 추가
background-image 속성을 사용하여 CSS의 배경 이미지를 만들 수 있습니다. 그런 다음 값에 대해 이미지 이름 또는 이미지 경로가 매개변수인 url() 함수를 사용할 수 있습니다. 속성은 CSS에서 body 태그를 선택한 후 작성해야 합니다. 이렇게 하면 웹페이지 전체에서 배경 이미지가 활성화됩니다. HTML, CSS 및 이미지 파일의 폴더 구조에 따라 이미지 이름과 경로를 작성해야 합니다. HTML 및 CSS 파일과 관련하여 다른 이미지 위치의 몇 가지 시나리오를 설명합니다.
이미지와 CSS 파일이 같은 디렉토리에 있다면 url() 함수에 이미지 이름을 쓰기만 하면 됩니다. 예를 들어 디렉토리에 bird.jpg라는 이미지가 있습니다. 같은 디렉토리에 style.css CSS 파일이 있습니다. 다음 코드는 배경 이미지를 설정합니다.
예제 코드:
body{
background-image:url(bird.jpg);
}
또한 HTML 및 CSS 파일의 상대 파일 경로가 올바른지 확인해야 합니다. CSS가 내부적으로 HTML로 작성된 경우 이미지와 HTML 파일은 동일한 디렉토리 안에 있어야 합니다. 동일한 디렉토리에 있지 않으면 HTML 파일에서 CSS 파일의 상대 경로가 정확해야 합니다.
이미지, HTML 및 CSS 파일이 다른 폴더에 있을 때 CSS 이미지에 배경 추가
index.html이라는 HTML 폴더, style.css라는 CSS 파일, bird.jpg라는 이미지가 있다고 가정해 보겠습니다. HTML 파일은 html 폴더에, CSS 파일은 css 폴더에, 이미지는 image 폴더에 있습니다. 이러한 파일 구조에서 배경 이미지가 표시되도록 CSS 파일과 이미지의 상대 경로를 지정하는 방법을 알고 있어야 합니다. 먼저 HTML과 CSS 파일이 연결되어 있는지 확인해야 합니다. 다음 코드는 HTML과 CSS 파일을 위에서 언급한 폴더 구조와 연결합니다.
예제 코드:
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
../ 기호는 현재 폴더에서 한 단계 뒤로 이동함을 나타냅니다. index.html이 있는 html 폴더에서 한 단계 뒤로 이동하면 css 폴더가 있는 상위 폴더에 도달합니다. 그러면 css 폴더에서 style.css 파일을 찾을 수 있습니다. 이제 CSS 파일에 같은 방법으로 bird.jpg의 상대 경로를 제공해야 합니다.
image 폴더는 현재 CSS 파일에서 한 단계 뒤로 물러나 있기 때문에 ../는 상위 폴더로 돌아갑니다. 그런 다음 bird.jpg가 있는 image 폴더를 가져옵니다. 따라서 CSS에서 결함 없이 배경 이미지를 설정할 수 있습니다.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn