배경 전체 페이지 CSS를 만드십시오. HTML에서 배경색을 설정하는 방법

html에서는 사이트의 배경을 설정하지 않고 css 스타일로 작성하는데 이는 이론적인 형식일 뿐입니다. 이제 이 배경을 정의하는 방법을 알아보겠습니다.

사이트 또는 별도의 블록에 대한 배경

이 목표를 달성하려면 css 파일이 필요하기 때문에 파일을 만들어 html에 연결해야 합니다. 이것은 이 기사에서 작성되었습니다. 그 후, 당신은 일할 수 있습니다. 먼저 배경을 설정할 대상을 결정해야 합니다. 전체 페이지가 전체라면 다음과 같이 할 수 있습니다.

몸(
배경색: 흰색
}

즉, 전체 페이지를 나타내는 body 태그를 참조합니다. background-color 속성은 배경색을 설정하는 데 사용됩니다. 그러나 배경을 단색 대신 그래픽으로 설정하려면 어떻게 해야 합니까? 그러면 다음과 같이 작성해야 합니다.

몸(
배경 이미지: url(이미지 경로. 이미지 확장자)
}

명확성을 위해 예를 들어 모든 것을 더 자세히 고려할 것을 제안합니다. 이를 위해 다음 이미지를 사용합니다.

예: background-image: url(comp.png) . 이 예에서 우리는 css 파일과 같은 폴더에 있는 png 형식으로 comp라는 배경 이미지를 설정했습니다.
html에서는 CSS 속성 작업을 보여주기 위해 특정 크기의 임의 블록을 생성합니다.

다음은 그에 대한 스타일입니다.

#ct(
배경 이미지: url(comp.png);
너비: 600px
높이: 400px;
}

우리가 얻은 것은 다음과 같습니다.

왜 그런 겁니까? 사실 브라우저는 기본적으로 블록을 완전히 채우기 위해 이미지를 여러 번 반복합니다. 예를 들어 매끄러운 장식품을 사용할 때 때때로 이것이 필요하지만 우리의 경우에는 하나의 그림이 있어야합니다. 다행히도 이것은 매우 쉽게 관리할 수 있습니다.

반복되는 배경

배경으로 이미지가 있는 경우 기본적으로 가로 및 세로로 반복되어 페이지의 전체 공간을 채웁니다. 이를 제거하기 위해 background-repeat 속성이 사용되며 그 값은 no-repeat(반복하지 않음)입니다. 다음 값도 있습니다.

• Repeat-x - 가로로만 반복
• 반복 - y - 세로 전용

그래픽 배경의 속성을 추가해 보겠습니다.

background-repeat: 반복 없음;

위치

background-position 속성은 이미지가 배치될 위치를 결정합니다. 수평 및 수직의 두 가지 값이 여기에 설정됩니다. 예: background-position: 오른쪽 하단 - 오른쪽 하단 모서리의 위치, 왼쪽 상단 - 상단 하단(기본값 등), 250px 500px - 왼쪽 상단 모서리에서 오른쪽으로 250픽셀, 아래로 오프셋 500.

예를 더 잘 살펴보겠습니다.

배경 위치: 오른쪽 상단;

사진이 오른쪽 상단으로 이동합니다. 또한 블록의 가장자리를 볼 수 있도록 노란색 배경을 지정했습니다.

배경 위치: 50% 50%;

이미지는 해당 블록의 중앙에 정확히 나타납니다. 예, 예, 이는 직위 기록 비율로 인해 가능합니다.

배경 위치: 70% 20%;

배경이 가로로 70%, 세로로 20% 이동합니다.

픽셀 단위로 음수 위치 값을 지정할 수도 있습니다. 예를 들어 큰 스프라이트 이미지를 사용하고 이 스프라이트의 원하는 부분을 차단해야 할 때 이 작업을 수행할 수 있습니다.

배경 고정

또한 background-attachment 라는 속성을 정말 좋아합니다. 두 개의 값만 있으며 첫 번째 값이 기본값(스크롤)입니다. 즉, 페이지를 스크롤할 때 배경도 함께 스크롤되며, 반복 없이 이미지를 사용하면 결국 종료되고 단색만 계속됩니다.

이를 방지하기 위해 background-attachment: fixed가 작성되었으며 이제 배경이 제자리에 안전하게 고정됩니다. 이것은 블록의 고정 위치를 정의하는 방법과 비교할 수 있으며 스크롤할 때 페이지에서 사라지지 않습니다.

이 모든 선함의 요약된 기록

배경을 만들 수 있는 속성을 많이 분석했는데, 모두 적용하면 번거로운 표기법이 나옵니다. 매우 우아한 솔루션이 있습니다. background 속성을 사용하면 다음 순서로 공백으로 구분하여 필요한 설정을 기록할 수 있습니다.
배경: 컬러 이미지 반복 고정 위치;
이제 모든 것을 다음과 같이 작성할 수 있습니다.

배경: 노란색 url(comp.png) 반복 없음 20% 100px;

일부 속성을 정의할 필요가 없으면 간단히 생략됩니다(이 경우 background-attachment를 작성하지 않았습니다).

많은 배경

그러나 여러 개의 배경 이미지가 필요한 경우에는 어떻게 합니까? 당신이 무엇을 할 수 있습니다. 오늘날 CSS는 이 기능을 지원합니다. 우리도 시도해 봅시다. 이 아이콘을 가져 가라

나는 그것을 노트북이라고 명명했다.

다음은 다중 전화를 포함하는 코드입니다.

배경: url(comp.png) 반복 없음 20% 100px,
url(laptop.png) 반복 없음 50% 50%;
배경색: 노란색

보시다시피 첫 번째 이미지 뒤에 쉼표를 넣고 두 번째 이미지에 대한 설정을 지정하기만 하면 됩니다. 이 경우 단색은 별도로 설정하는 것이 좋습니다.

같은 방법으로 원하는 만큼 사진을 더 많이 녹화할 수 있지만 너무 많이 사용하지 마십시오. 그래픽이 너무 많으면 좋지 않습니다.

여기서 이 글을 끝내고 싶습니다. 배경으로 다른 많은 흥미로운 일을 할 수 있습니다. 나는 앞으로 그것들에 대해 쓰려고 노력할 것입니다(예를 들어, 저는 이미 무언가를 썼습니다). 이 속성에 행운을 빕니다.

모든 사이트를 구축할 때 기능 외에도 디자인이 매우 중요합니다. 이것은 사이트가 만들어지는 특정 회사나 사람의 스타일과 디자인을 설정하는 것입니다. 이 문서의 지침에 따라 배경색과 해당 이미지를 조정하는 것은 어렵지 않습니다.

• 스타일="배경 이미지: url('file:///C:/Users/FILE_PATH.jpg')"

화면 해상도가 더 높은 사용자의 경우 이미지가 오른쪽 아래로 복제됩니다. 사진이 평범하지 않으면 잘 보이지 않습니다. 이 설정을 수정하는 특수 명령이 있습니다.

• background-repeat : "값". 값에 대한 옵션은 다음과 같습니다. "repeat-x" - 배경 이미지를 가로 및 세로로 반복합니다. "repeat-y" - 세로로만 반복합니다. "반복 없음" - 이미지가 제자리에 고정되고 반복되지 않습니다. "space" - 전체 페이지가 이미지의 최대 사본 수로 채워지고 바깥 쪽이 잘립니다. "둥근" - 동일한 옵션이지만 이미지의 가장자리가 정확하게 조정됩니다.
• 배경 첨부: "값". Value라는 단어 대신 "scroll" 태그를 사용하면 이미지가 사이트와 함께 스크롤됩니다. "고정" - 스크롤할 때 배경이 변경되지 않은 상태로 유지됩니다.
• 배경 크기: 값 Value2. 여기서 값은 픽셀 단위의 값을 취해야 합니다. 예: 100px 200px. 픽셀 외에도 ​​백분율 값이 허용됩니다. 페이지를 이미지로 채우는 옵션입니다. 숫자 외에도 두 개의 매개변수를 입력할 수 있습니다. " 포함" - 긴 면을 따라 페이지를 이미지로 채우고 "표지" - 너비를 따라 이미지로 페이지를 채웁니다.

HTML 배경으로 페이지를 채우는 기본 사항을 알면 첫 번째 웹사이트를 만들 준비가 된 것입니다.

작성자:모두를 환영합니다. 웹 디자인에서 배경색과 이미지는 어떤 요소를 더 매력적으로 디자인할 수 있도록 해주기 때문에 큰 역할을 합니다. 오늘은 html로 배경을 만드는 방법을 알아보겠습니다.

배경을 설정할 때 html로 얻을 수 있습니까?

지금 당장은 아니라고 말씀드리겠습니다. 일반적으로 html은 웹 페이지를 디자인하도록 설계되지 않았습니다. 매우 불편할 뿐입니다. 예를 들어 배경색을 설정하는 데 사용할 수 있는 bgcolor 속성이 있지만 이것은 매우 불편합니다.

따라서 CSS(Cascading Style Sheet)를 사용합니다. 배경 설정을 위한 더 많은 옵션이 있습니다. 오늘 우리는 가장 기본적인 것들을 분석할 것입니다.

CSS로 배경을 설정하는 방법은 무엇입니까?

따라서 우선 배경을 설정할 요소를 결정해야 합니다. 즉, 규칙을 작성할 선택자를 찾아야 합니다. 예를 들어 전체 페이지의 배경을 전체적으로 설정해야 하는 경우 div 선택기를 통해 모든 블록에 대해 본문 선택기를 통해 이를 수행할 수 있습니다. 글쎄, 등등. 배경은 스타일 클래스, 식별자 등 다른 모든 선택기에 첨부될 수 있고 첨부되어야 합니다.

선택자를 결정한 후에는 속성 자체의 이름을 작성해야 합니다. 배경색(즉, 그라데이션이 아닌 이미지가 아닌 단색)을 설정하기 위해 background-color 속성이 사용됩니다. 그 후에 콜론을 넣고 색상 자체를 작성해야합니다. 이것은 다양한 방법으로 수행할 수 있습니다. 예를 들어 키워드, 16진수 코드, rgb, rgba, hsl 형식을 사용합니다. 어떤 방법이든 할 것입니다.

가장 일반적으로 사용되는 방법은 16진수 코드입니다. 색상을 선택하려면 색상 코드를 볼 수 있는 프로그램을 사용할 수 있습니다. 예를 들어 포토샵, 페인트 또는 일부 온라인 도구. 따라서 예를 들어 전체 웹 페이지에 대한 공통 배경을 지정합니다.

본문( 배경색: #D4E6B3; )

이 코드는 헤드 섹션에 삽입해야 합니다. 파일이 같은 폴더에 있어야 합니다.

배경으로 그림

그림의 경우 작은 html 언어 아이콘을 사용합니다.

ID가 있는 빈 블록을 생성해 보겠습니다.

명시적인 차원과 배경을 지정해 보겠습니다.

#bg( 너비: 400px; 높이: 250px; 배경 이미지: url(html.png); )

이 코드에서 background-image라는 새 속성을 사용했음을 알 수 있습니다. html 요소에 배경으로 이미지를 삽입하기 위한 것입니다. 무슨 일이 있었는지 보자:

이미지를 지정하려면 콜론 뒤에 키워드 url을 작성하고 괄호 안에 파일 경로를 지정해야 합니다. 이 경우 이미지가 html 문서와 동일한 폴더에 있다는 사실을 기준으로 경로를 지정합니다. 이미지 형식도 지정해야 합니다.

이 작업을 수행했는데도 여전히 블록에 배경이 표시되지 않으면 이미지 이름을 올바르게 썼는지, 경로와 확장자가 올바르게 설정되었는지 다시 확인하세요. 이것은 브라우저가 이미지를 찾을 수 없기 때문에 단순히 배경이 표시되지 않는 가장 일반적인 이유입니다.

하지만 한 가지 기능을 눈치채셨나요? 브라우저는 블록 전체에서 사진을 찍고 곱했습니다. 따라서 이것은 배경 이미지의 기본 동작입니다. 블록에 들어갈 수 있는 한 수직 및 수평으로 반복됩니다. 이 동작으로 쉽게 관리할 수 있습니다. 이렇게 하려면 4가지 주요 값이 있는 background-repeat 속성을 사용합니다.

반복 - 기본값, 이미지가 양쪽에서 반복됩니다.

Repeat-x - x축에서만 반복합니다.

Repeat-y - y축을 따라 반복합니다.

반복 없음 - 전혀 반복하지 않습니다.

각 값을 쓰고 어떤 일이 일어나는지 볼 수 있습니다. 나는 다음과 같이 쓸 것이다:

배경 반복: 반복 x;

이제 수평으로만 반복합니다. 반복 금지라고 쓰면 사진은 한 장뿐입니다.

좋습니다. 이것들은 배경 작업의 기본 기능이기 때문에 이것으로 끝낼 수 있지만 더 많은 제어 옵션을 얻을 수 있는 2가지 속성을 더 보여 드리겠습니다.

반복을 통해 코더는 하나의 작은 이미지를 사용하여 배경 텍스처와 그라디언트를 만드는 요점을 달성하는 데 사용되었습니다. 30 x 10픽셀 또는 더 작을 수 있습니다. 아니면 조금 더. 이미지는 한 쪽 또는 양쪽 모두에서 반복될 때 전환이 보이지 않아 결국 하나의 단색 배경이 얻어지도록 했습니다. 그건 그렇고, 이 접근 방식은 사이트의 매끄러운 질감을 배경으로 사용하려는 경우 지금 사용할 가치가 있습니다. 오늘날 그라디언트는 이미 css3 방법을 사용하여 구현할 수 있습니다. 나중에 이에 대해 확실히 이야기하겠습니다.

배경 위치

기본적으로 배경 이미지는 반복으로 설정되지 않은 경우 해당 블록의 왼쪽 상단 모서리에 있습니다. 그러나 background-position 속성으로 위치를 쉽게 변경할 수 있습니다.

다양한 방법으로 요청할 수 있습니다. 한 가지 옵션은 이미지가 있어야 하는 면을 간단히 지정하는 것입니다.

배경 위치: 오른쪽 상단;

즉, 모든 것이 세로로 동일하게 유지되었습니다. 배경 이미지가 맨 위에 있지만 가로로 측면을 오른쪽, 즉 오른쪽으로 변경했습니다. 위치를 설정하는 또 다른 방법은 백분율로 설정하는 것입니다. 이 경우 카운트다운은 어떤 경우에도 왼쪽 상단 모서리에서 시작됩니다. 100% - 전체 블록. 따라서 이미지를 정확히 중앙에 배치하려면 다음과 같이 작성합니다.

배경 위치: 50% 50%;

위치 지정에 대해 기억해야 할 한 가지 중요한 점은 첫 번째 매개변수는 항상 수평 위치이고 두 번째 매개변수는 수직 위치라는 것입니다. 따라서 80% 20%의 값을 보면 배경 이미지가 오른쪽으로 강하게 이동할 것이라고 즉시 결론을 내릴 수 있지만 많이 내려가지는 않을 것입니다.

마지막으로 위치를 픽셀 단위로 지정할 수 있습니다. 모든 것이 동일하며 % 대신 px가 있을 뿐입니다. 어떤 경우에는 그러한 위치 지정이 필요할 수도 있습니다.

약어 표기

모든 것이 우리가 했던 방식으로 설정되면 코드가 상당히 복잡해진다는 데 동의합니다. 그림으로 가는 경로와 반복, 위치가 설정되어야 한다는 것이 밝혀졌습니다. 물론 반복과 위치가 항상 필요한 것은 아니지만, 어쨌든 속성 속기를 사용하는 것이 더 정확할 것입니다. 그녀는 다음과 같이 보입니다.

background: #333 url(bg.jpg) 반복 없음 50% 50%;

즉, 첫 번째 단계는 필요한 경우 전체 단색 배경색을 기록하는 것입니다. 그런 다음 이미지, 반복 및 위치에 대한 경로입니다. 일부 매개변수가 필요하지 않은 경우 생략하면 됩니다. 동의합니다. 훨씬 빠르고 편리하며 코드도 크게 줄입니다. 일반적으로 색상이나 그림만 지정해야 하는 경우에도 항상 축약형으로 작성하는 것이 좋습니다.

배경 이미지의 크기 제어

현재 이미지는 다음 트릭에 적합하지 않으므로 다른 이미지를 사용하겠습니다. 크기는 블록과 같거나 그 이상으로 합니다. 따라서 블록을 완전히 채우지 않도록 배경 이미지를 만드는 작업에 직면했다고 상상해 보십시오. 예를 들어 그림은 블록 크기보다 훨씬 큽니다.

그러한 경우에 무엇을 할 수 있습니까? 물론 가장 간단하고 합리적인 옵션은 단순히 이미지를 줄이는 것이지만 항상 가능한 것은 아닙니다. 서버에 있으며 현재로서는 이를 줄일 시간과 기회가 없다고 가정해 보겠습니다. 이 문제는 background-size 속성의 도움으로 해결할 수 있습니다. 이 속성은 상대적으로 새롭다고 할 수 있으며 배경 이미지 및 실제로 모든 배경의 크기를 조작할 수 있습니다.

따라서 내 이미지는 이제 블록의 모든 공간을 차지하지만 배경 크기를 지정하겠습니다.

배경 크기: 80% 50%;

다시 말하지만, 첫 번째 매개변수는 가로 크기이고 두 번째 매개변수는 세로 크기입니다. 모든 것이 올바르게 적용되었음을 알 수 있습니다. 사진은 너비가 블록 너비의 80%이고 높이가 절반이 되었습니다. 여기서 한 가지 설명만 하면 됩니다. 크기를 백분율로 설정하면 그림의 비율에 영향을 줄 수 있습니다. 따라서 비율을 깨지 않으려면 조심하십시오.

짐작할 수 있듯이 배경 크기도 픽셀로 지정할 수 있습니다. 또한 사용할 수 있는 두 가지 값 키워드가 있습니다.

표지 - 이미지의 최소 한 면이 블록을 완전히 채우도록 이미지의 크기가 조정됩니다.

포함 - 이미지가 최대 크기의 블록에 완전히 맞도록 크기를 조정합니다.

이 값의 장점은 그림의 비율을 변경하지 않고 그대로 두는 것입니다.

또한 사진을 늘리면 품질이 저하될 수 있음을 이해해야 합니다. 레이아웃 디자이너의 삶과 실제 사례를 예로 들 수 있습니다. 데스크탑용으로 디자인할 때 사이트를 기본 모니터 너비(1280, 1366, 1920)에 맞게 조정해야 한다는 것은 누구나 알고 이해하고 있습니다. 배경 이미지 크기를 1280 x 200으로 설정하고 그런 다음 빈 공간보다 너비가 더 큰 화면이 나타나면 그림이 너비를 완전히 채우지 않습니다.

99%의 경우 이것은 웹 개발자에게 적합하지 않으므로 그는 background-size: cover를 설정하여 이미지가 항상 창의 최대 너비까지 늘어나도록 합니다. 이것은 사용하기에 좋은 트릭이지만 이제 1920픽셀의 화면 너비를 가진 사용자가 차선의 이미지 품질을 볼 수 있다는 문제에 직면하게 될 것입니다.

나는 그것이 최대 너비까지 늘어날 것임을 상기시킵니다. 따라서 품질이 자동으로 저하됩니다. 여기서 유일한 올바른 솔루션은 처음에 더 큰 이미지(1920픽셀 너비)를 사용하는 것입니다. 그런 다음 가장 넓은 화면에서는 자연스러운 크기가 되고 다른 화면에서는 단순히 천천히 잘리지만 동시에 배경 이미지를 유능하게 선택하면 사이트의 모양에 영향을 미치지 않습니다.

대체로 이것은 이 기사에서 얻은 지식을 실제 레이아웃에 적용하는 방법의 한 예일 뿐입니다.

CSS가 있는 반투명 배경

CSS를 사용하여 구현할 수 있는 또 다른 기능은 반투명 배경입니다. 즉, 이 배경을 통해 뒤에 무엇이 있는지 볼 수 있습니다.

예를 들어 전체 페이지의 배경을 이전 예제에서 사용한 이미지로 설정하겠습니다. 모든 실험을 수행하는 bg 식별자가 있는 블록의 경우 rgba 색상 설정 형식을 사용하여 배경을 설정합니다.

앞서 말했듯이 CSS에는 색상을 설정하는 많은 형식이 있습니다. 그 중 하나는 그래픽 편집기에서 일하는 사람들에게 꽤 잘 알려진 형식인 rgb입니다. 다음과 같이 작성됩니다. rgb(17, 255, 34);

괄호 안의 첫 번째 값은 빨간색, 녹색, 파란색 순으로 채도입니다. 값은 0에서 255 사이의 숫자일 수 있습니다. 따라서 rgba 형식은 다르지 않으며 알파 채널이라는 매개변수가 하나만 추가됩니다. 값은 0에서 1 사이일 수 있으며, 여기서 0은 완전한 투명도입니다.

거의 모든 인기있는 사이트는 멋진 외관을 가지고 있습니다. 웹사이트 디자인에서 중요한 부분은 배경이라고도 하며 우리 각자가 만들거나 변경할 수 있는 배경입니다. 이 기사에서는 사이트에 배경을 넣는 방법을 알려 드리겠습니다.

웹사이트의 새로운 배경 만들기

작업을 완료하려면 4가지 방법 중 하나를 사용할 수 있습니다.

• 1. 단색의 배경
• 2. 질감이 있는 배경
• 3. 그라디언트가 있는 배경
• 4. 큰 이미지가 있는 배경

하나의 색상으로 배경 만들기

한 가지 색상으로 구성된 사이트의 배경을 생성하거나 변경하려면 해당 파일로 이동해야 합니다. 스타일.css, 값을 찾는 본문 - 본문(사이트의 본문을 담당함). 이제 background-color 함수가 없는 경우 작성하고 색상 코드를 지정해야 합니다. 사이트에 흰색 배경을 만들어야 하는 경우 다음 코드를 작성해야 합니다.

배경색: #83C5E9 ; (예시와 같이 파란색 배경)

웹사이트 - (STM)에서 전체 색상 목록을 찾을 수 있습니다. 색상을 변경하려면 콜론 뒤에 값을 변경하고 작업을 즐기십시오.

텍스처로 배경 만들기

이 방법은 사이트의 아름다운 배경을 만들 수 있기 때문에 최근에 특히 인기가 있습니다. 텍스처는 단순하지만 매우 아름답기 때문에 자주 사용됩니다. 텍스처를 연결하려면 사이트가 설치된 호스팅의 이미지 폴더에 텍스처를 업로드해야 합니다. 그 후에 다음 코드를 작성해야 합니다.

배경색: #537759;

배경 이미지: url(images/pattern.png);

이 코드에는 색상(녹색)을 유지하기 위한 친숙한 매개변수와 녹색 텍스처를 연결하는 요소가 있습니다.

그라데이션으로 배경 만들기

CSS 함수를 사용하여 연결된 모든 이미지는 가로 및 세로로(축을 따라) 반복될 수 있습니다. 엑스그리고 와이). 이 기능을 사용하면 우리 자신의 손으로 사이트의 간단한 배경을 만들 수 있습니다. 이렇게 하려면 1메가픽셀 너비의 그래디언트를 만들고(아래 그림 참조) 이미지로 저장하고 호스팅에 업로드해야 합니다. 그런 다음 필요한 코드를 작성할 수 있습니다.

배경색: #83C5E9;

배경 이미지: url(images/gradient.jpg);

배경 반복: 반복 x;

이 세트에는 우선순위에 따라 재보험에 사용하는 배경색을 담당하는 기능이 있습니다. 그 다음은 그래디언트를 연결하는 매개변수이고 마지막으로 X축을 따라 그래디언트를 반복하는 역할을 하는 함수입니다.

사이트 배경에 큰 이미지 사용

이 방법은 다른 사진을 사용하여 배경을 만들 수 있으므로 두 번째로 많이 사용됩니다. 이 방법을 구현하려면 사이트의 이미지 폴더에 큰 이미지를 업로드하고 다음 코드를 작성하기만 하면 됩니다.

배경색: #000000;

배경 이미지: url(이미지/이미지 제목.jpg);

배경 위치: 중앙 상단;

background-repeat: 반복 없음;

처음 두 매개변수로 모든 것이 명확하면 마지막 두 매개변수를 강조 표시해야 합니다. 세 번째 기능을 사용하면 이미지를 사이트 중앙에 고정할 수 있으며 마지막 매개변수는 페이지 구조 전체에서 이미지가 반복되는 것을 차단합니다.

ucoz 웹사이트에서 배경 변경하기

사이트에 대한 배경을 만드는 이러한 방법은 다른 콘텐츠 관리 시스템에서 사용할 수 있지만 사이트(ucoz)에서는 사용할 수 없습니다. ucoz 사이트의 배경을 변경하려면 사이트 제어판으로 이동하여 "디자인 매니지먼트", 그리고 다음에서 "템플릿 편집".

이제 스타일 시트(CSS)를 열어 줄을 찾아야 합니다. 몸및 매개변수 배경. 그런 다음 링크를 복사하여 인터넷 브라우저에 붙여넣으면 배경이었던 사진에 액세스할 수 있습니다.

새 배경을 사용하려면 파일 관리자에 업로드하기만 하면 됩니다. 동시에 배경에 대한 새 이미지의 이름이 변경 전과 동일한지 확인하십시오. 작업을 저장하고 사이트로 이동하여 완료된 작업을 봅니다.

사이트 배경을 HTML로 변경

이미지를 사용하여 html 사이트에 배경을 만들려면 코드에 다음 줄을 입력하기만 하면 됩니다.

색상을 사용하여 사이트의 배경을 만들려면 선이 다음과 같아야 합니다.

이것으로 우리의 이야기를 마칩니다. 이제 웹 사이트의 배경을 만드는 방법을 알았습니다. 성공적인 프로젝트!

최신 브라우저를 사용하면 요소에 임의의 수의 배경 이미지를 추가할 수 있으며 각 배경의 매개변수를 쉼표로 구분하여 나열합니다. 범용 배경 속성을 사용하고 먼저 하나의 배경을 지정하고 두 번째 배경을 쉼표로 구분하여 지정하는 것으로 충분합니다.

배경을 창의 전체 너비로 늘리는 방법은 무엇입니까?

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

웹 페이지에 배경 이미지를 추가하는 방법은 무엇입니까?

웹 페이지에 배경 이미지를 추가하려면 background style 속성의 url 값 내부에 이미지의 경로를 지정하면 본문 선택기에 추가됩니다.

애니메이션 배경을 만들 수 있습니까?

애니메이션은 모든 문서에 생명을 불어넣을 수 있는 강력한 기술입니다. 따라서 Flash 기술이 인터랙티브한 것 외에도 웹 페이지에 만화를 추가하는 엄청난 인기를 얻은 것은 놀라운 일이 아닙니다. GIF 그래픽 형식은 또한 순차적인 프레임 변경을 통해 가장 간단한 애니메이션을 지원합니다. 따라서 이 형식의 이미지를 사용하면 개별 이미지뿐만 아니라 웹 페이지의 배경이나 특정 요소에도 애니메이션을 적용할 수 있습니다.

먼저 Adobe Photoshop 또는 이 목적에 적합한 다른 프로그램을 사용할 수 있는 GIF 형식의 애니메이션 그림을 만들어야 합니다. 배경 이미지로 사용할 수 있는 기성 애니메이션 파일 라이브러리도 있습니다. 그런 다음 예제 1과 같이 background style 속성을 사용하여 이미지를 배경으로 추가합니다.

페이지 오른쪽 하단에 배경 이미지를 넣는 방법은 무엇입니까?

페이지에서 배경 이미지의 위치를 ​​제어하기 위해 background-position 스타일 속성을 사용하며 이미지의 수평 및 수직 좌표를 동시에 설정합니다. 배경 이미지가 반복되지 않도록 하려면 no-repeat 값과 함께 background-position 속성을 사용하십시오.

배경이 반복되지 않도록 하는 방법은 무엇입니까?

기본적으로 배경 이미지는 가로 및 세로로 반복되어 웹 페이지의 전체 필드를 바둑판식으로 배열합니다. 그러나 특히 단일 이미지의 경우 이러한 배경 동작이 항상 필요한 것은 아니므로 배경 스타일 속성에 반복되지 않는 값을 추가하면 구출됩니다.

배경을 세로로만 반복하려면 어떻게 해야 합니까?

배경 반복은 일반적으로 웹 페이지의 요소 또는 창 높이에 연결된 장식 선이나 그라디언트를 만드는 데 필요합니다. 이러한 경우 배경을 세로로 반복하면 요소의 크기에 관계없이 입체적인 그림을 얻을 수 있습니다. 처음에는 배경 이미지가 관절 없이 반복되도록 주의해야 합니다.