CSS 다중 이미지 배경 행은 무엇입니까?

검색을 통해 특정 검색어에 대한 답변을 찾을 수 없습니다 ... 초보자 능력과 결함있는 사고가 원인 일 수 있습니다. 내가 달성하고자하는 것은 3 개의 타일이없고 반복되지 않는 사이드 바이 사이드 이미지의 두 행을 웹 페이지 배경으로 설정하는 것입니다. 여기 CSS 다중 이미지 배경 행은 무엇입니까?

내가 CSS의 배경으로 복제하려는 기본 HTML 서식입니다 :

<style type="text/css"> 
body 
{ background-image: url('images/image1.gif'), url('images/image2.gif'), url('images/image3.gif'), url('images/image4.gif'), url('images/image5.gif'), url('images/image6.gif'); background-repeat: no-repeat; } 
</style>

이 짓을하더라도 "여기

<HTML> 
<span><img src="images/image1.gif"><img src="images/image2.gif"><img src="images/image3.gif"><BR><img src="images/image4.gif"><img src="images/image5.gif"><img src="images/image6.gif"></span> 
<HTML>

CSS의 솔루션에서 내 원유 시도이다 작업 "... 내가 할 수 있었던 전부는 왼쪽 상단 모서리에 서로의 위에 직접 6 개의 이미지를 쌓는 것이었다. newb에 대한 도움은 크게 감사하겠습니다.

감사합니다.

출처

2013-03-06 user2138961

각 이미지의 크기를 아는 경우 'background-position'을 사용할 수 있습니다. – Passerby

당신은 HTML을 사용할 수 있지만, 그것은 'position : absolute'와'z-index : -1'을주고 배경으로 사용하게합니다. – Zemljoradnik

각 배경 이미지에 명시 적으로 background-position을 할당해야합니다. 이것은 당신의 조건에 대해 작동합니다 :

background-position: top left, top center, top right, bottom left, bottom center, bottom right;

는 또한 background-size CSS 속성을 살펴 있습니다.

Working Fiddle

출처

2013-03-06 08:41:59

고마워, 나는 그것을 시도하고 나란히 이미지를 설정하지 ...하지만 이미지 크기 (350 px) 때문에 각 사이에 큰 차이가 있습니다. 나는 그 (것)들을 간격없이 깨끗한 행에 가지고 싶습니다. CSS로이를 수행 할 수있는 방법이 있습니까? – user2138961

@ user2138961 앞서 언급했듯이'background-size' 속성 (링크가있는 업데이트 된 게시물 확인)을 살펴보십시오. 그렇지 않으면 계산을 수행하여 적합하게 만듭니다. :). –

CSS 다중 이미지 배경 행은 무엇입니까?

답변

관련 문제