Блог

Главная - Вопросы по программированию - ошибка размера фона css, а также положения изображения

ошибка размера фона css, а также положения изображения

#html #css

#HTML #css

Вопрос:

Хорошо, для пользователей моего сайта / участников есть возможность загрузить / связать пользовательское изображение для использования на начальной странице моего сайта. Это хорошо работает почти со всеми новыми браузерами, поддерживающими размер фона. Но не заполняет весь раздел div изображением, если браузер не поддерживает размер фона css3.

Вчера у меня была возможность протестировать свой сайт на 25-дюймовом мониторе, и в итоге я понял, что часть отображения изображения вышла из строя. В итоге произошло то, что изображение было сдвинуто влево.

Сегодня, проверяя код, я забыл, что у меня была эта строка в «background-position: top left;» но я вспомнил, почему я оставил ее в коде, в тот момент, когда я добавляю «top center» или просто «top», фон все еще отображается, однако слева от него есть белая полоса размером 6-10 пикселей. Я пытался использовать left: 0px; но не могу заставить это работать, поскольку я использую position: fixed; и если я изменю его на position: absolute, отображается полное изображение, которое в конечном итоге создает полосу прокрутки внизу.

Вот код для части CSS, которую я использую в данный момент

 #cpBackgroundImg  { 
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box; 
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}

и вот другая часть кода, которая фактически отображает изображение

 <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="cpBackgroundImg"></div>

Может кто-нибудь сказать мне, как исправить эту проблему?
— Спасибо

http://jsfiddle.net/Hnwjg/6/

Комментарии:

1. добавьте Jsfiddle этого, будет легче понять, в чем проблема

2. Вы могли бы использовать background-position со значением%, таким как 50% 50%.

3. Это слишком длинная скрипка, приятель. Пожалуйста, размещайте только соответствующую разметку без заголовка и CSS и Javascript в соответствующем разделе! По крайней мере, из вашей скрипки я не могу сказать, в чем проблема.

Ответ №1:

 width: 1600px;

Тот монитор, на котором вы его тестировали, имеет разрешение больше 1600? Если это так, то div выглядит так, как будто он ограничивает ширину вашего изображения 1600. означает, что справа от изображения будет пробел?

Просто мысль.