CSS 만 사용하여 백그라운드에서 CSS 이미지 확장 및 크기 조정

853

브라우저 뷰포트 크기에 따라 배경 이미지가 늘어나고 크기를 조정하고 싶습니다.

CSS 오버플로 및 크기 조정과 같은 작업을 수행하는 스택 오버플로에 대한 몇 가지 질문을 보았습니다 . 잘 작동하지만 태그가 background아닌을 사용하여 이미지를 배치하고 싶습니다 img.

그 중 하나에 img태그가 배치 된 다음 CSS를 사용하여 img태그에 경의를 표합니다 .

width:100%; height:100%;

작동하지만 그 질문은 조금 오래되었으며 CSS 3에서는 배경 이미지 크기를 조정하면 꽤 잘 작동한다고 말합니다. 이 예제를 첫 번째 시도했지만 나에게 적합하지 않았습니다.

background-image선언 과 함께하는 좋은 방법이 있습니까?

css  background 
— 파비오 안 튠즈
소스
113
배경 크기 : 100 % 100 %;
— Andreas L.
5
이 데모가 도움이 될 수도 있습니다 : w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas 질문의 나이가 요인이 아니어야합니까? 이 질문은 6 년 전에 요청되었으며 귀하가 지적한 질문은 4 년 전에 요청되었습니다.
— Fábio Antunes 2016 년
@ FábioAntunes IMHO 우리는 최선의 답변으로 질문을 닫고 싶지 않고 대신 중복 된 내용을 권장합니다. 나는 이것이 메타에서 논의되었을 것이라고 확신하지만 지금은 그것을 찾을 수 없습니다 ...
— Alex Angas

답변:

1047

CSS3에는라는 멋진 속성이 background-size:cover있습니다.

가로 세로 비율을 유지하면서 배경 영역을 배경 이미지로 완전히 덮도록 이미지의 크기를 조정합니다. 전체 영역을 다룹니다. 그러나 크기가 조정 된 이미지의 너비 / 높이가 너무 크면 이미지의 일부가 보이지 않을 수 있습니다.

— 바시 시타 조기
소스
11
종횡비가 일치하지 않으면 표지가 이미지를 자르기 때문에 일반적인 해결책은 아닙니다.
— mahemoff
1
IE 브라우저에서 작동하려면 -github.com/louisremi/background-size-polyfill
— Wreeecks
4
Firefox에서는 작동하지 않는 것 같습니다. 그러나 background-size: 100vw 100vh;트릭을 훌륭하게 수행합니다.
— Yannick Mauray
5
@ YannickMauray 시도 :background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— 쿠마
2
가로 축에만이 기능을 사용하려면 다음을 사용하십시오. background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

CSS3 속성을 사용하여 아주 잘 할 수 있습니다. 작은 이미지는 업 스케일되지만 이미지 왜곡이없는 비율로 크기가 조정됩니다. 아직 모든 브라우저에서 구현되지는 않았습니다.

background-size: 100%;
— 맷 버지스
소스
19
@nXqd 그것은 전체 코드입니다. 로 컨테이너를 background-image만들고 위의 속성을 포함합니다. 언급 한 바와 같이, 브라우저 지원은 아직 좋지 않으며이 버전의 브라우저 특정 버전이 있습니다. W3C CSS3 모듈-webkit-background-size 참조 : background-size 및 css3.info : background-size
— MrWhite
15
이미지의 종횡비를 유지하려면 "background-size : cover;"를 사용해야합니다. 또는 "배경 크기 : 포함;". 나는 polyfill을 구축 한 그 구현 IE8에서 해당 값 : github.com/louisremi/background-size-polyfill
— 루이 레미
4
auto종횡비를 유지 하기 위해 추가 하는 것이 좋습니다 .
— Chibueze Opata
186

내가 언급 한 코드를 사용하여 ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

원하는 효과를냅니다. 배경이 아닌 내용 만 스크롤됩니다.

배경 이미지는 모든 화면 크기에 대해 브라우저 뷰포트로 크기가 조정됩니다. 컨텐츠가 브라우저 뷰포트에 맞지 않고 사용자가 페이지를 스크롤해야하는 경우 컨텐츠가 스크롤되는 동안 배경 이미지가 뷰포트에 고정 된 상태로 유지됩니다.

CSS 3을 사용하면 훨씬 쉬울 것 같습니다.

— 파비오 안 튠즈
소스
12
그러나 이것은 배경 이미지가 아닙니다. 이 작업은 블록에만 수행 할 수 있지만 input [type = text]와 같은 인라인 요소는 수행 할 수 없습니다. 아니면 내가 틀렸어?
— deerchao
11
class = "stretch"가 필요하지 않습니다. CSS에서 식별자로 #background img {}를 사용하십시오
— BerggreenDK
z- 지수 : -1; 이미지를 백그라운드로 유지합니다. 전경에 이미지를 표시하려면 z 인덱스 값을 늘리거나 해당 인덱스를 제거하십시오.
— gokhanakkurt
내가 겪고있는 문제는 IE8과 관련이 있습니다. DIV의 배경 이미지가 가득 차 있지만 IE8에서는 이미지가 DIV 외부로 이동하여 전체 이미지를 볼 수 없습니다. 잘립니다. 내 질문은 다음과 같습니다. stackoverflow.com/questions/22331179/…
— Si8
1
사람들이하는 명백한 실수는 배경 이미지를 CSS에 background : url("example.png");넣은 다음 css 속성을 사용 background-size:100%;하여 이미지를 화면 너비에 맞게 조정하는 것입니다. 이 작동하지 않습니다, 그렇지? 본문의 배경 이미지를 넣으려면 다음과 같이 이미지 속성을 본문 태그에 추가해야합니다 <body background="example.png">. 그런 다음 CSS background-size:100%;를 사용 하여 크기를 조정하십시오.
— sjsam
166

CSS :

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— 조쉬 크로 지어
소스
그러나 IE8에서는 작동하지 않습니다. 창의 맨 위와 맨 아래에 여백을 만듭니다.
— erdomester
Android에서는 html, body {...}대신 사용할 때 작동했습니다 body {...}.
— Edward
53 
background-size: 100% 100%;

배경을 늘려 두 축의 전체 요소를 채 웁니다.

— 그래 딕슨
소스
40

다음 CSS 부분은 모든 브라우저에서 이미지를 늘려야합니다.

각 페이지마다 동적으로 수행합니다. 따라서 PHP를 사용하여 각 페이지마다 고유 한 HTML 태그를 생성합니다. 모든 사진은 'image'폴더에 있으며 'Bg.jpg'로 끝납니다.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

모든 페이지에 대해 하나의 배경 그림 만있는 경우 $pic변수를 제거하고 이스케이프 백 슬래시를 제거하고 경로를 조정하고이 코드를 CSS 파일에 배치 할 수 있습니다.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Internet Explorer 9, Chrome 21 및 Firefox 14에서 테스트되었습니다.

— 토르스텐 니 후에
소스
2
벤더 접두사의 선행 '-'를 잊어 버렸기 때문에 예제는 이전 버전과의 호환성 측면에서 작동하지 않습니다. 그것은해야한다 -webkit-background-size, -moz-background-size등등합니다. 참조 developer.mozilla.org/en-US/docs/CSS/...을 또는 당신은 같은 약식 속성에 그것을 미래 지향적를 포함 갈background: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— 폴커 E.
이것은 IE9에서 나를 위해 작동하는 유일한 솔루션이었습니다. 감사.
— robnick
17

실제로 img 태그를 사용하면 배경 이미지와 동일한 효과를 얻을 수 있습니다. z-index를 다른 것보다 낮게 설정하고 position : absolute를 설정하고 전경의 모든 상자에 투명한 배경을 사용해야합니다.

— 킴 스테 벨
소스
그게 내가 다른 사람들의 질문에서 보았고 작동했지만 CSS3가 나온 이후로 더 나은 방법이라고 생각했습니다.
— Fábio Antunes
3
브라우저 사용에 대한 개발이있을 수 있으며 고려할 때 10 년만에 상업적으로 사용할 수 있을까요?
— Kim Stebel
CSS3이기 때문에 최신 브라우저에서 볼 수있는 속성을 사용하고 지원되지 않는 브라우저에 최소 표준을 제공하는 데 아무런 문제가 없습니다. 예를 들어 <IE8에는 지루하지만 수용 가능한 타일 배경을 사용하고 Firefox / Chrome / Safari / Opera에는 멋진 그림을 사용할 수 있습니다. 또한 JavaScript가있는 구형 브라우저에서 CSS3 기능을 복제하기위한 많은 폴리 ​​필이 있습니다. 다시 말해, 모든 브라우저가 CSS3을 지원하기 위해 모든 브라우저가이를 기다릴 필요는 없습니다.
— Dan Blow
: 그냥 독점 MS AlphaImageLoader의 사용을 참조이 다른 포스트 발견 stackoverflow.com/questions/2991623/...
— uglymunky
17

이 CSS를 사용하십시오 :

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
소스
15

그것은 CSS 트릭으로 설명됩니다 : 완벽한 전체 페이지 배경 이미지

데모 : https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

암호:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— 아머 샤 자드
소스
위의 답변을 바탕으로 모바일 장치 및 Microsoft Edge에서 백그라운드 첨부 파일 수정이 작동하지 않는 것을 보았습니다. 내가 추천 모든 장치와 브라우저에서 메이크업 배경 스트레치 및 수정에 대한 완벽한 솔루션 jquery-backstretch.com
— Aamer Shahzad
15

이 클래스를 CSS 파일에 추가 할 수 있습니다.

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

그것은 작동합니다 :

  • 사파리 3 이상
  • Chrome 그 이상
  • Internet Explorer 9 이상
  • Opera 10 이상 (Opera 9.5 지원 background-size, 키워드 제외)
  • Firefox 3.6 이상 (Firefox 4는 비 공급 업체 접두사 버전을 지원합니다)
— 아룬 라즈 S
소스
이것은 "적합한 스트레치"답변입니다. 참고 : 종횡비가 변경됩니다.
— devdrc
10

컨테이너 크기에 따라 이미지의 크기를 적절하게 조정하려면 다음을 사용하십시오.

background-size: contain;
background-repeat: no-repeat;
— 저스틴 피
소스
9

나는 이것을 사용하고 모든 브라우저에서 작동합니다.

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— 마흐디 조 카르
소스
9

감사!

그러나 누군가가 나에게 부족한 점을 말해 줄 때까지 Chrome 및 Safari 브라우저 에서 작동하지 않았습니다 (스트레치는 효과가 있었지만 그림의 높이는 2mm에 불과했습니다!) .

설정하려고 height:auto;min-height:100%;

따라서 height:100%;라인에 맞게 변경하십시오 .

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

새로 추가 된 코드 바로 전에 Drupal Tendu 테마 에이 코드가 있습니다 style.css.

html, body {height : 100 %;}

#page {background : #ffffff; 높이 : 자동! 중요; 높이 : 100 %; 최소-높이 : 100 %; 위치 : 상대;}

그런 다음 Drupal 내에서 추가하면서 그림으로 새 블록을 만들어야합니다 class=stretch.

<img alt = ""class = "stretch"src = "pic.url"/>

Drupal 블록에서 편집기로 그림을 복사하면 작동하지 않습니다. 편집기를 서식이없는 텍스트로 변경해야합니다.

— 싸이 브
소스
8

100 % 너비와 높이의 절대 div 이미지에 동의합니다. CSS에서 본문의 너비와 높이를 100 %로 설정하고 여백과 패딩을 0으로 설정하십시오. 이 방법으로 찾을 수있는 또 다른 문제는 텍스트를 선택할 때 선택 영역에 배경 이미지가 포함되어 전체 페이지를 선택한 상태로 만드는 불행한 영향을 줄 수 있다는 것입니다. 다음 user-select:none과 같이 CSS 규칙 을 사용하여이 문제를 해결할 수 있습니다 .

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

다시 말해, Internet Explorer는 사용자 선택 옵션을 인식하지 못하기 때문에 나쁜 사람입니다. Internet Explorer 10 미리보기 조차도 지원하지 않으므로 JavaScript를 사용하여 배경 이미지 선택을 방지하는 옵션이 있습니다 (예 : http http://www.felgall.com/jstip35.htm ) 또는 CSS 3 백그라운드 스트레치 방법을 사용하십시오.

또한 SEO의 경우 배경 이미지를 페이지 하단에 배치하지만 배경 이미지를로드하는 데 시간이 너무 오래 걸리는 경우 (즉, 처음에 흰색 배경) 페이지의 맨 위로 이동할 수 있습니다.

— 미케 블랙
소스
그런 다음 선택하지
— 않아야
7

전체 페이지로 배경 이미지를 늘리지 않고 배경 이미지를 가운데에 맞추고 크기를 조정하고 가로 세로 비율을 유지하고자했습니다. 다른 답변에서 제안 된 변형 덕분에 이것은 나를 위해 일했습니다.

인라인 이미지 : ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— 애니 디
소스
5

이상적인 크기 조정 배경 이미지를 얻기 위해 background-X CSS 속성 조합을 사용했습니다.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

이렇게하면 배경이 항상 전체 브라우저 창을 덮고 크기를 조정할 때 중앙에 유지됩니다.

— 라이언 덴-카트
소스
4

Backstretch 플러그인을 사용하십시오 . 하나의 이미지가 슬라이드 될 수도 있습니다. 컨테이너 내에서도 작동합니다. 예를 들어이 방법으로 배경의 일부만 배경 이미지로 덮을 수 있습니다.

내가 그것을 작동시킬 수 있기 때문에 플러그인을 사용하기 쉽다는 것을 증명합니다 :).

— 다니엘
소스
3

내용을 가로로 가운데에 맞추려면 다음과 같은 조합을 사용하십시오.

background-repeat: no-repeat;
background-size: cover;
background-position: center;

이것은 아름답게 보일 것입니다.

— 사무엘 람잔
소스
1

이 border-image : yourimage속성을 사용하여 이미지를 테두리까지 확대 할 수 있습니다 . 배경 이미지를 제공하더라도 테두리 이미지가 그 위에 그려집니다.

이 border-image속성은 CSS 3을 지원하지 않는 스타일 시트가 구현 된 경우 매우 유용합니다. Chrome 또는 Firefox를 사용하는 경우 background-size:cover속성 자체를 권장합니다 .

— 나 테쉬 바트
소스
0

하나의 이미지 만 사용하여이 작업을 수행 하시겠습니까? 실제로 두 개의 이미지를 사용하여 스트레칭 배경과 다소 유사하게 만들 수 있기 때문입니다. 예를 들어 PNG 이미지.

전에이 작업을 해봤는데 그렇게 어렵지는 않습니다. 게다가, 스트레칭은 배경의 품질에 해를 끼칠 것이라고 생각합니다. 큰 이미지를 추가하면 컴퓨터와 브라우저 속도가 느려집니다.

— 마리 오리 칼데
소스
좋은 지적. 그러나 배경 이미지에 jpg를 사용하고 있습니다. 그녀는 약 1500x1000에 불과 100kb를 조금 넘습니다. 그러나 어떻게 했습니까?
— Fábio Antunes
1
이미지를 가로로 가운데에 놓고 단색이나 패턴으로 이미지 가장자리를 부드럽게 만드는 것은 어떻습니까? 이를 통해 사용자가 이미지 해상도보다 더 많은 경우에 원활하게 조정할 수 있습니다.
— MarioRicalde
그러나 이미지가 배경을 채우고 싶습니다. 당신의 말은, 내가 보통하는 일입니다.
— Fábio Antunes
0

다음은 나를 위해 일했습니다.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

다른 차원에서 전체 배경을 다루기 위해

— tony2tones
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.