Изменение фоновых изображений

Question

Я довольно новичок в написании кода и выполнении детских шагов с проблемой, которую у меня возникает: замена фоновых изображений. Я сделал очень небольшие корректировки трех изображений, составляющих фон сайта. Один из них был основным фоном (в контейнере для тела), который загружался просто отлично. Следующим было изображение обертки с атрибутом repeat-y, который больше не выполняется со времени свопинга - изображение появляется, но отображается только как одна белая строка, в то время как это означает «заполнить» остальную часть страницы , Наконец, изображение нижнего колонтитула вообще не отображается.

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

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

#wrapper, footer, .pagetop, .copyright { 
width:942px; 
margin:0 auto; 
padding:0px 37px 0px 37px; 
overflow:hidden; 
clear:both; 
} 

.bodywrap { 
background: url(images/background.png) 49.9% 0% repeat-x; 
width:1016px; 
margin:auto; 
overflow:hidden; 
} 

#wrapper { 
background: url(images/wrapper.png) 49% repeat-y; 
clear:both; 
padding-bottom:25px; 
min-height:225px; 
} 

.footer { 
background: url(images/footer.png) no-repeat 51% 0%; 
overflow:hidden; 
min-height:107px; 
font-size:1.2em; 
padding-top:17px; 
font-family: 'Francois One', sans-serif; 
} 

Заранее благодарим за обмен опытом!

Answer 1

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

body { 
    background: #ffffff url("img_tree.png") no-repeat right top; 
} 


right means align the image on the x axe to the right and 
top means align the image on the y axe to the top 

Понимаете ли вы, что ваши 49.9% значения говорят фоновое изображение, чтобы начать повторять на 49% влево от края коробки вы, как это, чтобы быть в.

Кроме того, ваш .bodywrap делает не имеют высоты. если вы видите только небольшую строку, это связано с тем, что ваш элемент занимает только пространство, содержимое которого находится внутри этого элемента. у вас может быть пробел или 1 строка кода. трудно сказать без HTML.

Таким образом, вы должны дать элементу .bodywrap минимальную высоту или высоту, равную высоте вашего изображения. Образ, который вы предоставили AS для элемента, не определяет высоту этого элемента. Тег <img> и фон изображения не работают одинаково. тэг <img> определит его высоту самостоятельно, но вы не можете повторить его как фон.

Здесь вы можете увидеть дополнительную информацию на фоне здесь: http://www.w3schools.com/css/css_background.asp