반복 배경 이미지 - 아니 작물 또는 만들 그것을 대칭

Question

내가 원하는 것은 : 것은 내가 원하는 무엇 (대칭을 너무, 첫 번째 자르기 만 유지) : 내가 무엇을 가지고 :

div.row.separator div.col { 
    height: 40px; 
    width: 100%; 
    padding: 0px; 
    background-image: url("./images/rhomb.png"); 
    background-repeat: repeat-x; 
} 

rhomb.png :

<div class="container-fluid" id="main-content"> 
    <div class="row"> 
    <div class="col"> 
     <h1>Title here 1</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras 
     luctus eros at maximus tincidunt. Donec fringilla mattis massa, 
     vitae blandit massa egestas sed. Maecenas ipsum ligula, pretium 
     nec pellentesque convallis, consequat at magna.</p> 
    </div> 
    </div> 
    <div class="row separator"> 
    <div class="col"> 
    </div> 
    </div> 
    ....... 

몸이 회색이 컨테이너는 흰색입니다. 섹션 뒤에 구분 기호로 마름모꼴 줄이 필요합니다.

div의 배경 반복 x로 사용되는 작은 이미지를 사용하면 마지막 자르기를 방지하거나 첫 번째 자르기에서 같은 자르기를 할 수 있습니다 (반복되는 배경을 가운데 정렬 ...)?

UPDATE : 실험 주시기 바랍니다 : https://github.com/GhitaB/sample-design-bootstrap4-css이 (. 나를 위해 난 그냥 궁금하지 진짜 문제.)

Answer 1

에도 공간 배경 반복에서 불구하고, 국경 이미지의 트윈 속성은 당신이, 일반적으로 잘 지원 (IE11에서 시작)

.test { 
 
    height: 0px; 
 
    width: 182px; 
 
    margin: 5px; 
 
    border-style: solid; 
 
    border-width: 0px; 
 
    border-bottom-width: 38px; 
 
    border-image: url(https://i.stack.imgur.com/8aOpi.png) 0 0 38 0 space; 
 
} 
 

 
.test:nth-child(2) { 
 
    width: 210px; 
 
} 
 

 
.test:nth-child(3) { 
 
    width: 220px; 
 
} 
 
.test:nth-child(4) { 
 
    width: 250px; 
 
}

<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div>

Answer 2

가 교체 :

background-repeat: repeat-x; 

background-repeat: space; 

와는 것 내 문제를 해결하십시오. (100 %는 아니지만 거의 모든 경우)

공백 : 이미지를 양방향으로 바둑판 식으로 배열합니다. 단일 이미지가 너무 커서 적합하지 않은 경우 이미지를 자르지 마십시오. 여러 개의 이미지가 들어갈 수 있다면 항상 가장자리에 닿아있는 이미지를 배치하십시오. (https://css-tricks.com/almanac/properties/b/background-repeat/) 또한

는 : 그것은 배경에 관해서 https://www.impressivewebs.com/space-round-css3-background/ 기본적으로

Answer 3

, 슬프게도, 우리는 명시 적으로 이미지 크기를 조정할 수 없습니다. 우리는 전체 페이지를 채우거나 그림 원본 이미지를 유지할 수 있습니다. 내 생각은 이미지 편집 소프트웨어를 사용하여 이미지의 배수를 만들고 전체 화면 형식으로 반복 된 이미지를 추가하는 것입니다. 아직 제대로 지원