반응형 CSS 배경 이미지

반응형 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의 원래 질문을 말합니다.다른 사용 사례에서는 필요한 경우 폭/높이/마진을 설정할 수 있습니다.

이 코드에 의해 당신의 배경 이미지는 가운데로 가서 당신의 디브 사이즈가 어떻게 변하든 그것의 사이즈를 고정합니다. 작고, 크고, 보통 사이즈에 좋습니다. 무엇보다도, 나는 그것을 내 배경 사이즈나 디브 사이즈가 변할 수 있는 나의 프로젝트에 사용합니다.

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%;

그거면 될거에요! :)

여기 제가 사용하는 반응형 배경 이미지를 위한 새스믹신이 있습니다.모든 제품에 적용 가능합니다.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 id를 보십시오.

이것이 제가 얻은 최선의 방법입니다.

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

w3 학교를 확인해보세요.

더 많은 사용 가능 옵션

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

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

사용했습니다.

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

정말 잘 되셨습니다.

하단 이미지 높이/폭 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

---

마법의 멋진 스크립트를 보려면 배경 equ 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;

이 Screen Size Simulator: http://www.infobyip.com/testwebsiteresolution.php 에서 반응성을 가지고 웹사이트를 테스트할 수 있습니다.

변경할 때마다 캐시를 지우고 파이어폭스를 사용하여 테스트하고 싶습니다.

다른 사이트/URL에서 이미지를 사용하고 싶은 경우 다음과 같습니다.background-image:url('../images/bg.png');//이 구조는 호스트된 서버의 이미지를 사용하는 것입니다.그러면 다음과 같이 사용합니다.background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

맛있게 드세요 :)

    <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>

가로 세로 비율에 관계없이 전체 영상을 표시하려면 다음을 시도합니다.

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

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

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

아니면

background-size:100%;

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

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

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

필요에 따라 상단 하단과 중앙을 정렬하기 위해 위치 속성을 사용할 수 있으며 배경 크기는 중앙 크롭(커버) 또는 전체 이미지(컨테이너 또는 100%)에 사용할 수 있습니다.

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");
    }

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

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;

언급URL : https://stackoverflow.com/questions/12609110/responsive-css-background-images