Как сделать фон мозайкой?

199
16 августа 2017, 18:07

Подскажите, как создать фон, чтобы при прокрутке фон сливался?
А сейчас получается, что верхний край изображения фона светлее, чем нижний, и при прокрутке видно границу фона.
https://jsfiddle.net/1rvurue4/
Можно ли как-то разрезать картинку, чтобы фон сливался?
Может быть сделать как-то с помощью svg, но чтобы было похоже.

.wrapper{ 
  background-image: url(http://hvac-profi.com/pic/bg.jpg); 
  background-repeat: repeat; 
  width: 100%; 
  display: block; 
  height: 1500px; 
}
<div class="wrapper"></div>

Answer 1

<html> 
 
<head> 
  <style> 
    body { 
      background-image: url("https://s8.hostingkartinok.com/uploads/images/2017/08/013d883b245dddf06388cd27dac6ca7c.jpg"); 
    } 
  </style> 
</head> 
 
<body> 
 
</body> 
 
</html>

Вариант № 1.

Вырезать один шестиугольник и повторить те стили что вы уже сделали. Получите однородный фон из одинаковых шестиугольников.

Вариант № 2 Подредактировать исходное изображение так что бы его верх и низ совпадали. Получите фон из разных шестиугольников идущих как бы полосами.

Вопрос скорее в том, какой результат требуется, от этого и отталкивайтесь.

П.С. Цсс не умеет анализировать картинки так что просто с помощтю стилей это не решить. В любом случае прийдется менять саму картинку.

READ ALSO
Какой размер экрана выставлять в медиа запросе под телефоны?

Какой размер экрана выставлять в медиа запросе под телефоны?

Здравствуйте, какой самый оптимальный размер в медиазапросах под телефоны?

150
Какой типа данных выбрать для MySQL

Какой типа данных выбрать для MySQL

Подскажите, какой тип данных выбрать для 11-значного числа 00012345678 с плавающей точкой для записи в таблицу SQL?

304
Использовать ли поле со ссылкой на пользователя, или лучше использовать только номер его ID?

Использовать ли поле со ссылкой на пользователя, или лучше использовать только номер его ID?

Всем привет!  Я разрабатываю REST API, принимающее и выдающее JSON, с использованием Spring Boot Actuator и Spring SecurityВ приложении есть ряд сущностей, принадлежащих...

153