[css] 응답 성이 뛰어난 CSS 배경 이미지

Program / 글쓴이

웹 사이트 (g-floors.eu)가 있고 배경 (css에서 콘텐츠의 bg 이미지를 정의했습니다)을 반응 적으로 만들고 싶습니다. 불행히도 실제로 생각할 수있는 한 가지를 제외 하고는이 작업을 수행하는 방법에 대해 전혀 알지 못하지만 해결 방법은 아닙니다. 여러 이미지를 만든 다음 CSS 화면 크기를 사용하여 이미지를 변경하지만이를 달성하기위한보다 실용적인 방법이 있는지 알고 싶습니다.

기본적으로 달성하려는 것은 워터 마크 ‘G’가있는 이미지가 이미지를 적게 표시하지 않고 자동으로 크기를 조정한다는 것입니다. 물론 가능하다면

링크 : g-floors.eu

지금까지 가지고있는 코드 (콘텐츠 부분)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

답변

브라우저 창의 크기에 따라 동일한 이미지의 크기를 조정하려면 다음을 수행하십시오.

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

너비, 높이 또는 여백을 설정하지 마십시오.

편집 : 너비, 높이 또는 여백을 설정하지 않는 것에 대한 이전 줄은 창 크기 조정에 대한 OP의 원래 질문을 나타냅니다. 다른 사용 사례에서는 필요한 경우 너비 / 높이 / 여백을 설정할 수 있습니다.

답변

이 코드를 사용하면 배경 이미지가 중앙으로 이동하여 div 크기 변경에 상관없이 크기를 수정하십시오. 작고 크고 큰 일반 크기에 적합하며 모두에게 가장 좋습니다. 내 배경 크기 또는 div 크기가 변경 될 수있는 프로젝트에 사용합니다.

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

답변

이 시도 :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

답변

CSS :

background-size: 100%;

그 트릭을해야합니다! 🙂

답변

여기 내가 사용하는 반응 형 배경 이미지를위한 sass mixin이 있습니다. 모든 block요소에 적용됩니다. 물론 일반 CSS에서도 동일하게 작동 할 수 있으며 padding수동으로 계산 해야합니다.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

예 http://jsfiddle.net/XbEdW/1/

답변

이것은 쉬운 것입니다 =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

상기 살펴보세요 jsFiddle 데모

답변

내가 얻는 가장 좋은 방법은 다음과 같습니다.

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

w3schools를 확인하십시오

더 많은 옵션 

background-size: auto|length|cover|contain|initial|inherit;