깨진 반응 이미지

나는 간단한 것을 놓치고 있어야합니다. 일반 Wordpress 템플릿을 편집하는 동안 배경 이미지를 헤더에 추가하기로 결정했습니다. 반응 형 디자인으로 이미지를 확대 할 필요가있어서 최대 폭을 100 %로 설정하고 높이를 자동으로 설정합니다. 아무 것도 표시되지 않습니다. 배경을 이미지의 기본 크기 (700 x 220)와 일치하는 고정 된 크기로 설정하면 사이트 크기를 줄이거 나 모바일 장치에서 볼 때까지는 모두 좋지 않습니다. 도와주세요! 참고로이 사이트는 portlandtoraleigh.com입니다. 감사합니다!깨진 반응 이미지

CSS :

.left-header{ 
background: url(images/headerimage.png) no-repeat; 
max-width: 100%; 
height: auto;

}

HTML :

<head> 
<meta charset="<?php bloginfo('charset'); ?>" /> 
<meta name="viewport" content="width=device-width" /> 

<title><?php wp_title('&mdash;', true, 'right'); ?></title> 

<link rel="profile" href="http://gmpg.org/xfn/11" /> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 

<?php wp_head(); ?> 
</head> 

<body <?php body_class(); ?>> 
<div id="page" class="hfeed site"> 
<?php do_action('before'); ?> 
    <div class="left-header"> 
    </div> 

    <div id="comeon"> 
    <nav class="site-navigation main-navigation" role="navigation"> 
    <h1 class="assistive-text"><?php _e('Menu', 'semprul'); ?></h1> 
    <div class="assistive-text skip-link"><a href="#content" title="<?php 
      esc_attr_e('Skip to content', 'semprul'); ?>"><?php _e('Skip to content', 
      'semprul'); ?></a></div> 

    <?php wp_nav_menu(array('theme_location' => 'primary')); ?> 
    </nav><!-- .site-navigation .main-navigation --> 
    </div> 
</header><!-- #masthead .site-header --> 
<div class="clear"></div> 

<div id="main" class="site-main">

출처

2013-04-07 Kevin Sundstrom

더 어려운 방법이라고 생각합니다. 이 시도 : 시도 패트릭에 대한

.left-header { 
    width:100%; 
    max-width:100%; 
    height:auto 
}

출처

2013-04-07 20:19:44

여전히 표시되지 않습니다. 확인 해봐. –

이미지 태그 만 존재하도록 주변 태그를 제거하십시오. 그런 다음 이미지의 src를 'http://portlandtoraleigh.com/wp-content/themes/semprul/images/headerimage.png'로 변경하십시오. –

정말 멋지다. 내 두뇌는 WP 모드에서 붙어 있었고 기본을 잊어 버렸습니다 ... 정말 고마워요, 내가 얼마나 많은 시간을 낭비했는지 부끄러워합니다! –

간단한! CSS

background-size:contain;

희망은 내가 도움이 :)

편집했다 : 당신이 사용하도록 선택할 수 있습니다 :

background-position: center center;

은 수평 및 수직으로 배경 이미지를 중앙에.

이미지가 표시되지 않으면 괄호 사이에 따옴표를 추가하십시오. 그래서 :

url('pathtoimage/image.png');

출처

2013-04-07 19:49:46

감사합니다 다음

<img class="left-header" src="filepath/image.png" />

,하지만 난 그것을 업데이트 –

, 당신은 또한 URL –

사이에 인용 부호를해야 할 수도 있습니다 ... 작동하지 않았다, HTTP : //portlandtoraleigh.com/images/headerimage.png 찾을 수 없습니다 :/ –

깨진 반응 이미지

답변

관련 문제