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

웹 사이트 (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;

나는 사용했다

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

정말 잘 작동했습니다.

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

하단 이미지 높이 / 너비 x 100 = 패딩 하단 %에 패딩을 추가하여 반응 형 웹 사이트 :

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

더 복잡한 방법 :

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

마법 같은 멋진 스크립트를 보려면 배경 EQ Firefox Ctrl + M의 크기를 조정하십시오.

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

이것을 사용할 수 있습니다. 나는 테스트했으며 100 % 정확합니다.

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

다음 화면 크기 시뮬레이터에서 반응 형으로 웹 사이트를 테스트 할 수 있습니다. http://www.infobyip.com/testwebsiteresolution.php

변경 할 때마다 캐시를 ​​지우고 Firefox를 사용하여 테스트하고 싶습니다.

다른 사이트 / URL이 아닌 이미지 양식을 사용하려는 경우 : background-image:url('../images/bg.png'); //이 구조는 자체 호스팅 서버의 이미지를 사용하는 것입니다. 그런 다음 다음과 같이 사용하십시오. background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

즐겨 :)

가로 세로 비율에 관계없이 전체 이미지를 표시하려면 다음을 시도하십시오.

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

화면 크기에 관계없이 전체 이미지가 표시됩니다.

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

두 줄의 코드 만 있으면 작동합니다.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

jQuery로 제곱 비율에 적응

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

또는

background-size:100%;

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

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

이런 식으로 더 이상 아무것도 할 필요가 없으며 매우 간단합니다.

적어도 그것은 나를 위해 작동합니다.

도움이 되길 바랍니다.

너비는 두 개 , 높이는 다른 두 개를background-size 사용 하십시오.

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

position 속성은 필요에 따라 상단 하단과 중앙을 정렬하는 데 사용할 수 있으며 배경 크기는 중앙 자르기 (표지) 또는 전체 이미지 (포함 또는 100 %)에 사용할 수 있습니다