CSS를 사용하여 배경을 전체 너비로 늘립니다. 전체 페이지 배경에 대해 CSS 및 기타 입증된 CSS 기술을 사용하여 사진을 전체 화면으로 늘리는 방법

이 강의의 목적은 항상 전체 브라우저 창에 걸쳐 확장되는 웹사이트의 배경 이미지를 구성하는 방법을 살펴보는 것입니다.

CSS 전용 기술입니다. 1 부.

인라인 요소 사용 모든 브라우저에서 크기를 조정할 수 있습니다. 브라우저 창을 세로로 채우려면 min-height 속성을 설정하고 가로로 채우려면 너비 속성을 100%로 설정합니다. 또한 min-width 속성을 이미지 너비로 설정하여 절대 축소되지 않도록 합니다.

트릭은 미디어 쿼리를 사용하여 브라우저 창이 이미지의 너비보다 작은지 확인하고 왼쪽 속성에 대한 백분율 값과 왼쪽 여백에 음수 값의 조합을 사용하여 배경 이미지를 가운데에 맞추는 것입니다.

다음은 CSS 코드입니다.

Img.bg (/ * 배경 채우기 규칙 설정 * / min-height: 100%; min-width: 1024px; / * 종횡비 설정 * / width: 100%; height: auto; / * 위치 설정 * / position: fixed; top: 0; left: 0;) @media screen and (max-width: 1024px) (/ * 특정 이미지마다 고유하게 정의 * / img.bg (left: 50%; margin-left: -512픽셀; / * 50% */ ) )

작동:

모든 버전의 일반 브라우저: Safari / Chrome / Opera / Firefox.

IE 6: 작동하지 않습니다. 하지만 몇 가지 위치 지정 트릭을 사용할 수 있습니다.

IE 7/8: 대부분의 경우 작동하며 작은 이미지를 중앙에 배치하지 않지만 화면을 올바르게 채웁니다.

IE 9: 작동합니다.

CSS 전용 기술입니다. 2 부.

문제를 해결하는 또 다른 방법은 인라인 요소를 넣는 것입니다. 페이지에서 왼쪽 상단 모서리에 위치를 고정하고 최소 너비 및 최소 높이 속성을 100%로 설정하여 종횡비를 유지합니다.

#bg (위치: 고정; 상단: 0; 왼쪽: 0; / * 종횡비 유지 * / 최소 너비: 100%; 최소 높이: 100%;)

그러나 이것은 이미지가 중앙에 배치되는 방식이 아닙니다. 따라서 이미지를 요소로 래핑합니다.

... 그만큼

브라우저 창 너비의 두 배가 됩니다. 그 안에 배치된 이미지는 종횡비를 유지하고 정확히 중앙에 위치한 브라우저 창을 완전히 덮습니다.

#bg (위치: 고정; 상단: -50%; 왼쪽: -50%; 너비: 200%; 높이: 200%;) #bg img (위치: 절대; 상단: 0; 왼쪽: 0; 오른쪽: 0; 하단: 0, 여백: 자동, 최소 너비: 50%, 최소 높이: 50%;)

작동:

Safari / Chrome / Firefox(모든 버전에서 테스트되지는 않았지만 최신 버전에서는 잘 작동함).

IE 8 이상.

Opera(모든 버전) 및 IE는 이 방법으로 작업하는 것을 거부합니다(잘못된 이미지 위치 지정).

jQuery 사용

이미지의 가로 세로 비율(선 요소 배경으로 사용됨)은 브라우저 창의 종횡비에 매핑됩니다. 이미지에 대해 더 작은 경우 할당해야 합니다. 오직이미지의 너비 속성은 100%이고 높이와 너비로 화면을 채웁니다. 더 많은 경우 할당하십시오. 오직이미지의 높이 속성은 100%입니다.

#bg(위치: 고정; 상단: 0; 왼쪽: 0;) .bgwidth(너비: 100%;) .bgheight(높이: 100%;)

$(function()(var theWindow = $(window), $ bg = $("# bg"), aspectRatio = $ bg.width() / $ bg.height(); function resizeBg()(if((theWindow) .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

작동:

IE7 +(스텁이 있는 경우 IE6에서도 작동할 수 있음)

다른 모든 브라우저에서.

결론

모든 솔루션 방법에는 고유한 장점과 단점이 있습니다. 귀하의 특정 사례에 맞는 것을 선택하기만 하면 됩니다. 글쎄, 또는 당신의 자신을 제공합니다.

여보세요. 오늘 우리는 CSS 도구(자바스크립트와 같은 다른 도구의 개입 없이)를 사용하여 배경을 확장하는 방법을 살펴볼 것입니다.

뻗기 CSS 배경특히 background-size 속성을 사용하여 CSS3의 출현으로 수단이 가능해졌습니다. 이 속성은 브라우저 크기 조정에 더 빠르고 적절하게 응답하고 확장된 그림을 더 빠르게 매끄럽게 만들고 원하는 대로 Javascript의 유사한 솔루션(background-size가 나타나기 전에 사용됨)보다 훨씬 더 잘 작동한다고 말해야 합니다. 2000년대 초에 x, - "Javascript가 비활성화된 상태에서도 작동합니다."

솔루션: 도구를 사용하여 CSS 배경을 늘리는 방법

background-size 속성은 여러 값을 가질 수 있습니다.
1) 지시문 중 하나일 수 있습니다: 덮개 또는 포함.

배경 크기: 포함; / * 전체 이미지가 블록 안에 맞도록 이미지의 크기를 비례적으로 조정합니다. * / background-size: 커버; / * 너비 또는 높이가 상자의 너비 또는 높이와 같도록 이미지의 크기를 비례적으로 조정합니다. * /

2) 백분율(컨테이너 너비의 100% 또는 94%)일 수 있습니다. 이 경우 1퍼센트 값과 2퍼센트 값을 모두 사용할 수 있습니다. 값이 2개인 경우 그림의 높이와 너비가 동시에 조정되고 각 값은 매개변수에 지정된 백분율에 비례하여 조정됩니다. ).

배경 크기: 100%; / * 표지 지시문과 동일 * / background-size: 100% 50%; / * 너비는 블록 너비의 100%이지만 높이는 50%만 되며 그림이 변형될 가능성이 큽니다. * /

3) 직접적인 숫자 값(픽셀, 센티미터, em 등). 앞의 경우와 같이 2개(또는 1개) 매개변수가 있을 수도 있습니다.
4) 자동 값. 그림이 늘어나지 않지만 원래 크기가 사용됨을 나타냅니다. 이 경우 매개변수는 2 또는 1일 수도 있습니다. 즉, 다음을 지정할 수 있습니다.

배경 크기: 60% 자동; / * 이미지의 너비는 60%, 높이는 원본 이미지의 크기에 비례합니다 * /

CSS 배경 확장 솔루션은 어디에서 작동합니까?

Can I Use 사이트의 데이터로 판단하면 IE 버전 9 이상을 포함한 모든 최신 브라우저에서 작동합니다. 따라서 원칙적으로 걱정할 이유가 없습니다. 호환성 표 참조:

일

CSS3를 사용하여 배경 이미지를 브라우저 창의 전체 너비로 늘립니다.

해결책

background-size 속성은 배경 크기를 조정하기 위한 것으로, 100%가 값으로 지정되면 배경이 브라우저 창의 전체 너비를 차지하게 됩니다. 이전 버전의 브라우저의 경우 예 1과 같이 접두사가 있는 특정 속성을 사용해야 합니다.

예 1. 신축성 있는 배경

HTML5 CSS 2.1 IE Cr Op Sa Fx

신축성 있는 배경

결과 이 예그림에 나와 있습니다. 하나.

쌀. 1. 축소된 창 크기에서 배경 보기

브라우저 창의 크기가 증가함에 따라 배경도 확장되기 시작하여 사진의 모양이 저하됩니다(그림 2).

쌀. 2. 창을 확대했을 때의 배경 보기

2표

내 블로그에 오신 것을 환영합니다. 계속해서 html의 기초를 이해합니다. 이 튜토리얼은 매우 간단하고 흥미로울 것이므로 프로그래밍 언어에 대해 더 많이 배우고 싶을 것입니다. 몇 분 안에 html에서 배경으로 그림을 만들고 훌륭한 결과를 얻는 방법을 배우게 될 것입니다.

나는 또한 배경을 더 균일하고 아름답게 만드는 몇 가지 뉘앙스에 대해서도 이야기할 것입니다. 자, 시작해 볼까요?

사진 선택

이미지를 선택하는 것으로 시작하고 싶습니다. 페이지에서 더 매끄럽고 아름답게 보이게 하고 치수와 정렬에 신경쓰지 않아도 됩니다. 나는 즉시 매끄러운 질감을 찾는 것이 좋습니다. 그것은 무엇입니까?

불행히도 html의 이미지를 전체 화면으로 늘리는 것은 불가능합니다. 사진은 전체 크기로 사용됩니다. 그림이 작으면 아래 스크린샷과 같이 전체 영역을 포장합니다. 그림을 늘리려면 추가 CSS 문서를 만들어야 합니다. 이 문서가 없으면 작동하지 않습니다.

하지만 시스템을 우회할 수 있는 옵션이 있습니다. 이렇게하려면 Photoshop을 사용하고 화면 너비 (1280x720)까지 사진을 사용하십시오. 이 경우 아래로 스크롤하면 그림이 다른 그림으로 변경됩니다.

많이 최선의 선택 CSS를 사용하지 않으려면 매끄러운 질감을 사용합니다. 관절이 보이지 않습니다. 그들은 디자인의 벽지 또는 현대 타일과 같습니다. 하나가 다른 하나를 대체하고 관절이 보이지 않습니다.

사용에 대한 법적 결과가 없는지 여부에도 관심이 있다면 사이트에서 검색하는 것이 좋습니다. Pixabay.com .

HTML

이제 코드로 작업해 보겠습니다. 나는 지금 우리가 html로 작업하고 있다는 것을 즉시 주목해야 합니다. 즉, 전체 사이트가 아니라 코드가 작성되는 특정 페이지에 대해서만 이미지를 변경하고 있습니다. 전체 리소스를 변경하는 데 관심이 있는 경우 다음을 사용하여 코드를 생성해야 합니다. CSS, 그러나 나중에 더 자세히 설명합니다.

메모장에서 작업할 수 있으므로 메모장 ++를 선호합니다. 작업하는 것이 훨씬 더 편리합니다. 코드가 추가되고 태그가 강조 표시됩니다. 이 프로그램은 무료이며 무게는 약 3MB입니다. 특히 초보자라면 적극 권장합니다.

그래서 태그에서 몸속성을 추가해야 합니다 배경이미지를 가져올 이미지에 대한 링크를 제공합니다. 이것은 프로그램에서 보이는 방법입니다.

메모장을 열고 여기에서 이 코드를 복사하면 됩니다. 따옴표 안에 당신이 좋아하는 사진에 대한 링크를 넣으십시오.

배경 이미지

초보자를 위해 주의하고 싶은 것은 이것이 요점입니다. pixabay에서 이미지를 가져오면 사진이 있는 페이지가 아닌 링크를 삽입해야 하지만 다음 탭에서 사진을 열어야 합니다.

이 특정 URL을 복사합니다.

문서를 저장합니다. 메모장을 사용하는 경우 확장 프로그램을 사용해야 함을 잊지 마십시오. .HTML ... 예를 들어 문서의 이름을 지정하십시오. back.html ... 그렇지 않으면 텍스트 문서로 저장되고 브라우저는 수행해야 하는 작업을 이해하지 못합니다.

완료되면 페이지가 다른 색상으로 채워집니다.

html에 대해 더 알고 싶다면 다음을 다운로드하는 것이 좋습니다. 무료 코스예브게니아 포포바 ... 그것에서 당신은 더 많은 태그, 언어 기능을 배우고 새로운 트릭을 시도하고 더 많이 알게 될 것입니다.

나는 Evgeny Popov의 코스가 엄청나게 인기가 있다고 말하지 않을 것입니다. 많은 전문가들이 그를 꾸짖고 그러한 진술을 접했다면 여기 내 의견이 있습니다. 이 수업은 무료로 제공되며 그럼에도 불구하고 초보자에게 기본 사항을 보여주고 최신 정보를 제공하는 주요 작업에 완벽하게 대처합니다.

모든 작가가 글을 쓰는 방법에 대한 자신의 견해를 가지고 있는 것처럼 프로그래머도 자신의 손글씨를 가지고 있습니다. 평생 웹 사이트를 만드는 방법을 배울 수 있지만 어딘가에서 시작해야 합니다. 책에서? 하지 그. 예, 더 신뢰할 수 있는 정보, 관련 정보가 포함되어 있지만 마스터하기가 너무 어렵습니다.

나와 동의하지 않아? 대안을 제시할 수 있습니다. 엘리자베스와 에릭 프리먼의 책 " HTML, XHTML 및 CSS 배우기 ". 별로 지루하지 않은 베스트셀러가 아니며 얼마 전에 출시된 2016년입니다. 정보는 아직 구식이 되지 않았습니다.

CSS

사이트의 모든 페이지에서 배경을 반복해야 하는 경우 CSS 없이는 할 수 없습니다. 물론 이전 장에서와 같이 매번 경로를 작성할 수 있습니다. 그러나 시간이 지남에 따라 교체해야 하는 경우를 상상해 보십시오. 링크가 오래되거나 디자인을 변경하려는 경우입니다. 각 페이지로 이동하여 코드를 변경하시겠습니까? 작동 안 할 것이다.

CSS는 이 문제를 해결하는 데 도움이 됩니다. css 확장자를 가진 파일을 만들고 다음 코드를 입력해야 합니다.

코드 자체에 대해 조금 이야기해 보겠습니다. 괄호 안은 뒤에 URL 사진이 이 파일과 같은 폴더에 있는 경우 타사 소스의 사진에 대한 링크를 입력하거나 문서 이름만 입력할 수 있습니다.

더 잘 알고 싶은 분들을 위해

CSS를 사용하면 늘릴 수 있습니다. 배경 이미지, 반복되지 않도록 만들고 gif 애니메이션 등을 추가하십시오.

하나의 기사가 모든 것을 할 수는 없습니다. 그리고 나는 나 자신을 위해 그러한 작업을 설정하지 않았습니다. 많은 미묘함이 있으며 한 기사에서 모든 것에 대해 이야기하기로 약속했다면 이것은 속임수에 불과합니다.

웹 사이트를 올바르게 작성하는 방법을 배우고 싶습니까? 프로그래밍 언어를 배우는 것이 좋습니다. Andrey Bernatsky의 코스를 추천할 수 있습니다" Zero에서 Pro로 HTML5 및 CSS3 ". 나는 이 작가를 정말 좋아한다. 나는이 특정 과정을 수강하지 않았습니다. 몇 년 전에 이미 유사하지만 덜 현대적인 것이있었습니다.

저자는 모든 것이 쉽고 이해할 수 있다고 매우 즐겁게 말합니다. 이 과정의 하이라이트는 당신이 공부만 하는 것이 아니라 선생님과 함께 특정 사이트를 만든다는 것입니다. 결과적으로 명함, 블로그 및 온라인 상점까지 얻을 수 있습니다. 아주 멋져요. 이 과정의 처음 세 가지 이론적인 HTML5 수업을 지금 바로 여기에서 볼 수 있습니다.

그건 그렇고, 이 과정과 함께 Andrey Bernatsky의 html 및 css 기초, 초보자를 위한 레이아웃, 저녁 방문 페이지 만들기 등 7가지 보너스를 받습니다. 본격적인 훈련에 들어가기 전에 무료 과정을 체험해 보십시오.” HTML5 및 CSS3 연습 ».

글쎄, 기본적으로 그게 다야. 자세히 알아보려면 뉴스레터를 구독하세요. 곧 반응형 레이아웃, 블로그 수익 증대에 대해 좀 더 자세히 알려 드리고 많은 것을 알려 드리겠습니다. 유용한 팁작업을 단순화합니다. 다음 시간까지 그리고 당신의 노력에 행운을 빕니다.

좋은 하루, 사이트 구축의 괴짜와 웹 주제 애호가. 오늘은 초보자 뿐만 아니라 때로는 개발자들도 자주 묻는 질문에 대한 답변을 드리고자 합니다. "css 사진을 전체 화면으로 늘리는 방법?" 사실, 이 기술은 구현하기가 매우 간단하지만 이것은 또 다른 문제입니다.

오늘날 이미지를 전체 화면에 배치할 수 있는 덕분에 여러 가지 방법과 프로그래밍 언어가 있습니다. 따라서 이 게시물에서는 css, css3, jquery 및 php를 사용하여 전체 크기 배경 이미지를 만드는 여러 방법에 대해 설명합니다. 본론으로 들어가자!

방법 1. CSS 도구를 사용한 적응형 배경 이미지

배경 이미지를 반응형으로 만들기 위해 계단식 스타일 시트는 속성을 제공합니다. 배경-크기... 크기를 설정할 수 있게 해줍니다. 그래픽 파일차원과 관련하여 열린 탭.

이렇게 하려면 다음 줄만 작성하면 됩니다.

배경-크기: 100%자동

첫 번째 매개변수, 즉 100%는 그림을 수평으로 늘리는 역할을 하고 두 번째 매개변수는 수직입니다. 이제 예제로 넘어가겠습니다.

CSS를 사용한 예

이 방법은 버전 10, Safari 버전 3, Firefox 3.6 및 IE 버전 9부터 시작하는 브라우저에서 지원됩니다.

방법 2. css3를 사용한 고무 배경

css3 사양이 출시되면서 많은 편리한 도구가 언어에 추가되었습니다. 그래서 확대된 배경을 이미지 형태로 생성하기 위해서는 앞 장과 동일한 속성을 사용하되 이미지의 크기는 백분율이 아닌 특수한 워드 커버로 설정한다. 배경-크기:씌우다... 매우 편리하지 않습니까?

이 속성이 어떻게 작동하는지 보려면 background-size 100% 및 auto 매개변수를 다음으로 변경하여 이전 예제를 실행하십시오. 씌우다.

JQuery 자체는 매우 편리합니다. API로 작업하기가 더 쉽고, 코드의 다양한 요소에 접근하기가 더 쉬우며, 일부를 구현하기도 더 쉽습니다.

예제가 작동하려면 이 방법, 먼저 다음 행으로 js 스크립트를 연결해야 합니다.

아래에 jQuery 구현이 이미 삽입된 예제의 프로그램 코드를 첨부했습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

제이쿼리 예시