Jump to content
  • 0

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


BOMS
 Share

Question

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

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

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

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

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

 background-size: cover; 


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

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

background-position: center center;


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

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

 

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Ну вообще background-size: cover обрезает фон, чтобы либо по высоте полностью вошел, либо по ширине. Обрезать не будет только если соотношение сторон картинки совпадет с соотношением сторон окна браузера.

Link to comment
Share on other sites

  • 0
13 минуты назад, Igor Schnaider сказал:

Ну вообще background-size: cover обрезает фон, чтобы либо по высоте полностью вошел, либо по ширине. Обрезать не будет только если соотношение сторон картинки совпадет с соотношением сторон окна браузера.

Это да. Дело в том, что у меня большой размер картинки бэкграунда. Сам контент размещается строго посередине бекгрануда. Я хочу чтобы, чтобы на больших мониторах происходило просто увеличение видимой области бекграунда. А самое содержимое сайта (которое расположено по центру) - и оставалось бы в центре.

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

Edited by BOMS
Link to comment
Share on other sites

  • 0

Мне посоветовали вот такой вариант описания backgoruind: 

Цитата

html { backround: url(...) 50% 50% no-repeat fixed; }

В принципе он самый близкий к тому ,который я хочу, но опять же - происходит сдвиг фона при изменении размеров окна браузера. А хотелось бы чтобы делалась обрезка (crop) заднего фона.

Я вот думаю

1. Может этот background поместить в DIV? а уже этот DIV спозиционировать как я хочу

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

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

Link to comment
Share on other sites

  • 0

Уточните, что вы понимаете под «сдвигом фона» и «изменением размеров фона». Потому что технически при background-size: cover размер фона именно что изменяется (синхронно с размером окна), а левый верхний угол фона при ресайзе будет смещаться относительно левого верхнего угла окна при любом background-position, кроме 0 0 (aka left top).

По тексту

Цитата

Мне же надо, чтобы изображение было по центру  не сжималось, а просто обрезалось ... и центр изображения был по центру экрана.

можно бы предположить, что вам нужен просто background-position по центру, с дефолтным background-size:auto. Но это не стыкуется с другими заявленными требованиями. Похоже, в текущей формулировке вы хотите взаимоисключающих вещей.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy