Фоновое изображение больше окна

Мне нужна помощь с CSS. Как вы можете видеть здесь, https://jsfiddle.net/88eb92ed/ разрешены полосы прокрутки. Я хочу скрыть их. Я никогда не использовал CSS раньше, и я использовал шаблон, поэтому я не знаю, как его изменить. Я хотел бы отключить полосы прокрутки. Я не знаю, что проще: измените размер фонового изображения или отключите полосы прокрутки. Некоторый код:Фоновое изображение больше окна

.body { 
    overflow: hidden; 
    position: absolute; 
    top: -20px; 
    left: -20px; 
    right: -40px; 
    bottom: -40px; 
    width: auto; 
    height: auto; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-image: url({{ url_for('static',filename='images/parisbackground.jpg') }}); 
    -webkit-filter: blur(5px); 
    z-index: 0; 
}

Я попытался с помощью overflow: hidden (от this SO вопрос) и проверить несколько веб-страниц, пытаясь исправить это. Кажется, что изображение больше, чем окно, поэтому я хотел бы сохранить центр изображения, но приспосабливаться к размеру окна, без полос прокрутки.

Спасибо!

источник

2015-07-14 aaossa

Вы на самом деле не сказал что вы пытаетесь выполнить, но похоже, что вы слишком много работаете. https://jsfiddle.net/isherwood/88eb92ed/1/ – isherwood

Это выглядит проще. Благодаря! Как сказано в вопросе, я не говорю «CSS», поэтому мне придется учиться. Еще раз спасибо. – aaossa

Если вы просто хотите, чтобы отключить полосы прокрутки:

body { 
    overflow: hidden; 
}

Примечание Это на <body> теге, а не .body класса.

Если вы хотите, чтобы элементы соответствовали их родительским контейнерам, вам нужно будет реорганизовать, как они позиционируются относительно друг друга.

У вас есть интересные вещи, касающиеся вашей разметки. Я не уверен, что цель .grad. Кроме того, не было бы проще применять стили к <body>, а не пытаться полностью позиционировать <div class="body"> за кучей вещей?

Если вы придерживаетесь .body, вам не нужно определять все четыре измерения для позиционирования. Вам только нужно ориентироваться на одну позицию для любого X или Y.

Так он больше похож:

position: absolute; 
top: 0; 
left: 0;

источник

2015-07-14 21:03:03 Plummer

Ну, это демонстрация, что я не знаю css: P Я применяю ваши рекомендации и, похоже, работает, полосы прокрутки исчезают. Мне пришлось написать 'top: 0; left: 0; \t правый: 0; bottom: 0; ' – aaossa

Последний вопрос. Когда я меняю ширину окна, центр изображения находится в центре, но когда я перемещаю его высоту, он показывает только верхнюю часть изображения. Надеюсь, ты понимаешь мой вопрос. – aaossa

Вы не должны располагать более одного значения на ось. Влево и вправо ваша ось X, верхняя и нижняя оси Y. Они будут ориентироваться на положение ближайшего родительского объекта с атрибутом 'position: relative;'. – Plummer

Попробуйте ниже:

http://jsfiddle.net/pratyush141/mkzkqdv0/

.body{ 
width:100%; 
overflow: hidden; 
position: absolute; 
top: -20px; 
left: -20px; 
right: -40px; 
bottom: -40px; 
background-size: cover; 
background-position: center; 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-image: url(http://www.meezan.tv/themes/default/member_images/example_background.png); 
-webkit-filter: blur(5px); 
z-index: 0; 
}

источник

2015-07-14 21:15:44

Фоновое изображение больше окна

ответ

Смежные вопросы