배경 이미지 넣기 공식

2022.04.26

 

배경에 이미지를 넣을때 공식이 대략 있는듯

 

이미지 주소(이미지)

배경 사이즈 : 커버

배경 위치 : 센터

 

.mainImg {
	background-image: url("https://cdn.pixabay.com/photo/2018/08/27/00/07/toy-3633751_960_720.jpg");
    background-position: center;
    background-size: cover;
    width: auto;
    height: 500px;
}

이렇게 넣으면 이쁘게 크기에 맞게, 중앙에 잘 들어감

 

+====+

2022.05.03

 

배경이미지 반투명으로 넣기

* {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    height: 100vh;
    color: white;
}

.container::before {
    content: "";
    background-image: url("/static/backgroundImg.jpg");
    /*background-repeat: no-repeat;*/
    background-size: cover;
    opacity: 0.7;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.mainBody {
    position: relative;
    padding: 30px;
    margin: 0;
}

height : 100vh   -> 화면 크기에 맞춤

::before{}   -> 가상구역을 만들어줌 이안에 배경을 넣고 opacity로 반투명 을 줌

사실상 content: ""에 배경을 넣고 

position은 relative는 요소 자기 자신을 기준으로 배치

absolute는 부모 요소를 기준으로 배치 하는것

가상환경이 absolute니까 부모를 기준으로 위치를 상하좌우를 0으로 맞춰준거다

 

정리하면

1. 가상요소를 만들어주고 가상요소에 배경이미지 넣어주기

2. .container의 position 값은 relative, 가상요소의 position 값은 abolute를 설정

3. 가상요소의 위치(top/ left / right / bottom)를 모두 0를 맞추기

4. .mainBody는 position: relative를 주어 배경이미지보다 위로 올라오게 하기