Не удается получить фоновое изображение для правильного отображения

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

PAGE LINK: http://dbtest.destinationballybunion.ie/?page_id=4600

Вот CSS я пытался применять к первым двум текстовых областей:

.boxera { 
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads 
/2014/11/NULEFT-A.png'); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
} 

.boxera p { 
margin-top: 4.000em; 
margin-right: 1.000em; 
margin-left: 12.500em; 
} 

.boxerb { 
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads 
/2014/11/NULEFT-B.png'); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
} 

.boxerb { 
position: absolute; 
margin-top: -1.800em; 
}

И последние два текстовых областей, я попытался положить в определенных размерах, но с тот же результат.

.boxerc { 
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads 
/2014/11/NULEFT-C.png'); 
background-size: 16.000em auto; 
background-repeat: no-repeat; 
} 

.boxerc { 
position: absolute; 
margin-top: 12.500em; 
} 

.boxerd { 
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads 
/2014/11/NULEFT-D.png'); 
background-size: 29.688em 20.250em; 
background-repeat: no-repeat; 
} 

.boxerd { 
position: absolute; 
margin-top: 26.500em; 
}

Может ли кто-нибудь помочь мне с этим. Я пробовал это посмотреть, все это кажется простым, пока я не претворю его в жизнь!

источник

2014-12-01 user3638587

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

Я дал размеры высоты и ширины четвертой области текста - боксерд - но я все равно получаю тот же результат? Я, вероятно, буду использовать изображения, как вы предполагали, но, безусловно, фоновые изображения не могут быть такими неудобными в использовании. – user3638587

Я добавил высоту и ширину к boxera и изменил размер изображения.

Так, например

добавить соответствующие размеры изображения для:

div.wpb_text_column.wpb_content_element.boxera 
div.wpb_text_column.wpb_content_element.boxerb 
div.wpb_text_column.wpb_content_element.boxerc 
div.wpb_text_column.wpb_content_element.boxerd

так для boxera

height:295px; width:475px;

Это единственный способ, которым я могу думать на самом деле изменения фонового изображения как вы так сильно ударили его в divs. Если, как уже упоминалось, вы не разделите его на CSS и на некоторые теги изображений, которые, как мне кажется, являются единственным другим способом.

источник

2014-12-01 13:55:13

Да, извините, я использую тему Wordpress вместе с плагином перетаскивания. Как вы и jme11 упомянули, используя измерения, есть ли способ обеспечить отзывчивость при использовании фоновых изображений, когда размер фона: 100% 100% не работает и использование реагирующих единиц, таких как используемые выше ems, похоже, не работает или ? – user3638587

А, ок. Насколько я знаю, и я мог ошибаться здесь, использование фонового изображения, связанного с div, было бы ограничено любыми измерениями, которые вы задали в нем. Извините, это не тот ответ, который вы ищете! –

все нормально. Спасибо за вашу помощь. – user3638587

Не удается получить фоновое изображение для правильного отображения

ответ

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