Высота в фоновой картине встроенный стиль

Я хотел бы создать текст на изображении как параллакс. И я использую встроенный стиль background-image, чтобы показать изображение. Как установить высоту этого изображения? Это может быть высота изображения. Но, мое изображение показывает, что высота связана с текстовыми строками. Например, у меня две строки, моя высота изображения будет показывать только две строки.Высота в фоновой картине встроенный стиль

Если я установил высоту в пикселе (высота: 400 пикселей), он работает, но как насчет отзывчивого дизайна? Это лучшие практики? Пожалуйста, порекомендуйте. Ниже мой стиль css. Заранее спасибо.

background-image: url(http://localhost:31903/wp-content/uploads/2015/05/corn-field-440338_1920-1024x680.jpg); 
background-attachment: fixed; 
background-repeat: no-repeat; 
background-position: center; 
background-size: 100% auto;

Я использую wp_add_inline_style стилизовать изображение

function metabox_inline_style($post_id) { 

$MyOptions = get_option('MyOptions'); 

    $custom_metabox_css = ''; 

     foreach ($MyOptions as $key => $MyOption) { 
if (isset($MyOption['background-image'])) { 
       $custom_metabox_css .= "#parallax-shortcode-{$key}.parallax {"; 
       $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-image:url('.$MyOption['background-image'].');' :''); 
       $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-attachment: fixed;' :''); 
       $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-repeat: no-repeat;' :''); 
       $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-position: center;' :''); 
       $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-size: 100% 100%;' :''); 
       $custom_metabox_css .= (isset($MyOption['background-image']) ? 'position: absolute;' :''); 
       $custom_metabox_css .= (isset($MyOption['background-image']) ? 'height: 100%;' :''); 

       $custom_metabox_css .= "}"; 
      } 
     } 

     wp_add_inline_style('custom-style', $custom_metabox_css); 
} 

add_action('wp_enqueue_scripts', 'metabox_inline_style');

источник

2015-08-12 W. Nelson

показать некоторый код, пожалуйста, используйте jsfiddle построить ваш пример – joyBlanks

@joyBlanks [ссылка] http://jsfiddle.net/WilliamN/s10x5czn/ –

Возможно без установки высоты DIV, фоновое изображение обтекает, содержащий только текст Его можно через настройки только высоту. Для того, чтобы отзывчивым стиль положить height: 100%;

jsfiddle here

источник

2015-08-12 12:11:19

Спасибо вам ответить , После того, как я проведу проверку с Fiddle, это выглядит красиво. Когда я изменяю свой реальный код, позиция: absolute делает мое изображение исчезающим. Еще одна информация, я использую функцию wp_add_inline_style для создания встроенного стиля. –

Теперь я решаю эту проблему, используя отступы: 20% 0; Надеюсь, это правильный путь. –

Высота в фоновой картине встроенный стиль

ответ

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