[CSS] background에 gradient 와 image 넣기 : background-image

background-image 속성

background-image는 배경에 이미지를 넣거나, 그라데이션 효과를 적용하는데 사용할 수 있다. 이미지와 그라데이션 효과를 함께 적용하는 것도 가능하다.

예시

background-image: url("../../media/examples/lizard.png");

background-image: url("../../media/examples/lizard.png"),
                  url("../../media/examples/star.png");

background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

linear-gradient()

여기서 linear-gradient 함수는 배경색에 2가지 색을 그라데이션 효과로 넣을 수 있는 방법이다.

background-image = linear-gradient(color1, color2);

background = linear-gradient(color1, color2);

background와 background-image속성 모두에 활용할 수 있다.

이를 활용해 JavaScript로 여러 색을 지정하고,
버튼을 누를 때 마다 그라데이션 효과가 있는 랜덤한 색으로 배경색을 설정하는 코드를 짜보았다.

  const body = document.querySelector("body");
  const btn = document.querySelector("button");
  function handleBtnClick() {
      const randomColor1 = colors[Math.ceil(Math.random() * colors.length)];
      const randomColor2 = colors[Math.ceil(Math.random() * colors.length)];
  body.style.background = `linear-gradient(${randomColor1}, ${randomColor2})`;
    }
  btn.addEventListener("click",handleBtnClick);

처음에는 자바스크립트에서 element.style.cssText 로 css속성을 추가해주려했는데, 그렇게되면 기존에 있는 css속성을 새로운 내용이 다 덮어버려서 배경색을 추가해주는 속성을 적용하는 것으로 변경했다.

body.style.background 속성을 추가하는 부분에서 백틱 사용을 놓쳐서 백틱 사용 방법에 대해서 다시 정리해봤다.

백틱 사용법

1. 템플릿 문자열

문자열을 적을 때 원래는 ''나 ""를 사용하지만, 문자열에 변수를 함께 적을 때는 백틱을 사용해준다.

//백틱 사용
const x='x';
const y='y';
const z='z';
console.log(`${x}는 x, ${y}는 y, ${z}는 z이다. `); //x는 x, y는 y, z는 z이다.

2. 함수 호출

함수를 호출할때 주로 ()를 사용하지만, 괄호 대신에 백틱을 사용해도 가능하다. 다만, 백틱(`)을 사용할 경우에는 매개변수가 문자열, 배열로 인식된다.