230609) JS로 background image 변경하기

배경을 설정하고, 이후 마지막 부분을 함수로 설정해서 영화 정보에 따라 자동으로 이미지가 들어오겠끔 해야 하는 상황이었다.

그렇기에 당연히 JS를 이용해 background image의 url 을 변경해야 했는데, background image에 linient-gradient도 함께 넣어놓은 상태라 적용이 될지부터가 걱정이었다.

 

결론적으로 아래 코드를 이용하였더니 gradient와 함수를 적용한 url 모두 잘 나옴을 확인할 수 있었다!

 

 bg.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 25%), rgba(0, 0, 0, 100%)),url(https://image.tmdb.org/t/p/original/${backdrop}`;

bg는 참고로 아래 코드를 적용해 둔 상태였으므로 모두의 상황에 맞게 함수를 설정해 두시고 bg처럼 사용하시면 될 듯합니다!

let bg = document.getElementById("background");

 

오늘도 잘 해냈다!