Xpoint
   [напомнить пароль]

Центрирование background (по центру экрана), но чтобы был фиксированого размера и не сжимался

Метки: [без меток]
2016-03-31 12:11:25 [обр] Максим[досье]

Здравствуйте, изучил все возможные способы позиционирования background с помощью CSS. Но никак не пойму, возможно ли сделать такое.

Есть картинка фона (background)  размером 2560 на 1440 

Хочу чтобы центр этого фонового изображения всегда был по центру экрана, но чтобы при этом при изменении ширины экрана - фоновая кртинка не изменяла своих размеров.

Образно говоря,

  1. Сначала применяю к фону свойство  

 background-size: cover; 

фоновое изображение при этом фиксировано, не изменяет своих размеров при изменении ширины экрана, просто обрезается - так как я хочу, но хотелось бы ещё чтобы центр картинки был по центру экрана.

  1. Применяю свойство 

background-position: center center;

Фоновое изображение встаёт по середине экрана, но теперь его размеры сжимаются и он сдвигается при изменении ширины окна.

Мне же надо, чтобы изображение было по центру  не сжималось, а просто обрезалось как при применении просто свойства background-size:cover и центр изображения был по центру экрана.

спустя 4 часа 9 минут [обр] Lynn «Кофеман»(56/571)[досье]
А зачем вообще background-size:cover?
спустя 3 часа 13 минут [обр] Marat Tanalin(6/78)[досье]
Уберите background-size: cover.
спустя 10 дней [обр] Максим[досье]

Дело в Вот например у меня код HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<img src="images/menu1.png" width="69" height="7" alt="" style="position: absolute; left: 379px; top: 85px;"/>
<img src="images/menu2.png" width="69" height="7" alt="" style="position: absolute; left: 535px; top: 84px;"/>
<img src="images/menu2.png" width="69" height="7" alt="" style="position: absolute; left: 612px; top: 85px;"/>
<img src="images/menu2.png" width="69" height="7" alt="" style="position: absolute; left: 689px; top: 85px;"/>
<img src="images/menu2.png" width="69" height="7" alt="" style="position: absolute; left: 456px; top: 84px;"/>
<img src="images/menu2.png" width="69" height="7" alt="" style="position: absolute; left: 767px; top: 85px;"/>
<div class="mainblock">
</div>
</body>
</html>

При таком CSS

body {
   background: url(../images/background.png);
   background-position: 50% 0px;
   }

Страница отображается вот так:
https://s24.postimg.org/lc171ff1h/2.jpg

При изменении ширины и высоты экран- задний фон перемещается


При таком CSS

body {
   background: url(../images/background.png);
      }

Страница выглядит вот так:
https://s22.postimg.org/daenkoz4h/1.jpg

При изменении размеров окна - задний фон остаётся фиксированным, но мне нужно чтобы картинка своим центром центрировалась посередине экрана


Вообще в идеале хочу сделать вот так:
https://s23.postimg.org/q0xomkcnf/3.jpg

И вот не знаю каким способом это сделать...

спустя 57 минут [обр] Lynn «Кофеман»(56/571)[досье]
html {
  backround: url(...) 50% 50% no-repeat fixed;
}
спустя 3 часа 39 минут [обр] Максим[досье]
Lynn «Кофеман»[досье] да, но можно чтобы при изменении ширины экрана background не двигался а просто как бы обрезался? Ну образно говоря чтобы Crop происходил. То есть не движение или изменение размера а обрезка изображения.
спустя 14 часов [обр] Максим[досье]

Я вот думаю

  1. может этот background поместить в DIV? а уже этот DIV спозиционировать как я хочу
  2. Разместить это bacground s DIV слой, но в качестве обычной картинки и спозиционировать её по-моему.

Но вот не знаю, какие способы позиционирования гибче? то есть предоставляют больше возможностей определения положения элемента относительно экрана?

спустя 24 минуты [обр] Lynn «Кофеман»(56/571)[досье]
Максим[досье] Так он и не двигается. Вы же сами захотели что бы центр картинки совпадал с центром экрана.
спустя 3 часа 13 минут [обр] Максим[досье]
сообщение промодерировано
вот тестовая страничка http://test.mxup.ru
Если несложно посмотрите плиз. При изменении ширины экрана - меню сдвигается относительно фона
Хотелось бы чтобы дуга всегда проходила между пунктом меню 6 и 7 а сквозь квадраты проходила центральная полоска фона (она впринципе нормально сейчас проходит, сдвигаются квадраты иногда вверх, на разной ширине экрана думаю поправлю с помощью @media в CSS) . Возможно ли такое?
спустя 23 часа [обр] Lynn «Кофеман»(56/571)[досье]
Тогда вам нужно «прибить» фон не к центру, а к правому верхнему углу.
Powered by POEM™ Engine Copyright © 2002-2005