сохранить фоновое изображение по центру

#jquery #css

Вопрос:

Хорошо, итак, я пытаюсь имитировать домашнюю страницу Google. Кажется, что даже при небольшом изображении Google растягивает его, чтобы оно поместилось, и не сильно его переполняет. Я пытался использовать background-position, но это может хорошо выглядеть для некоторых изображений, но выглядит дерьмово для других. Итак, мой вопрос в том, как я смогу выполнить этот трюк с использованием jQuery?

хорошо, вот css, который я использую в atm

 background-repeat: no-repeat;
background-size: auto;
background-clip: border-box;
background-origin: padding-box; 
background-attachment:scroll; 
background-position: 0px 28%;
position: fixed;
z-index:-10;

и стиль div на странице, которая использует приведенный выше класс css в качестве стиля включения для отображения изображения в фоновом режиме

 <div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="phx_utmc_background"></div>

Могут возникнуть некоторые проблемы с использованием width в качестве height в части div, но я не уверен, поскольку без height это не сработает.

Итак, да ^^

1. Можете ли вы немного объяснить желаемый эффект? На домашней странице Google есть одно изображение (логотип), и оно всегда одного размера.

2. Я говорю о пользовательской фоновой функции в Google

Ответ №1:

Как уже упоминалось, этого можно добиться с помощью CSS

Попробуйте

 body {
   background: url('http://placekitten.com/200/300');
   background-position: center 0%;
   background-repeat: no-repeat;
}

Прямая ссылка

Ответ №2:

вы пробовали просто использовать CSS

 body {
   background: url('background.png') no-repeat center right 40% 0 transparent;
}

Хотя я этого не тестировал, кажется, вы могли бы выполнить это с помощью CSS.