画像の下部にコンテンツコンテナを開始する

Question

私は自分の画像上に表示されたコンテンツを表示したいが、ほんのわずかである。だからある意味では、画像は部分的にページの背景のように見えます。私はコンテンツボックスが画像のようにページの全幅に渡って伸びることを現在は望んでいません。

これは私が取り組んでいるページです。 http://outside.hobhob.uk/test/?portfolio=mind-the-gap-2

これは、私はそれが（コンテンツのテキストボックスには、画像の上にわずかにどのようにだけ焦点を当て）に似て持ってすることを目指していますものです：https://s32.postimg.org/ytavty67p/13340631_10154339496581336_223276410_o.jpg

は、私は多分変更でこれを達成することができます方法はありますコンテンツボックスのCSSは少しですか？たぶん位置やZ-インデックスを変更していますか？

ページのコードは現在一般的な方法で動作していますが、私はVisual Composerを使用してページ内のコンテンツをレイアウトしていますので、これを簡単に実現できますか？

<div class="pagewidth"> 
    <div class="content single single-portfolio"> 
    <div class="post-content"> 
     <article id="post-<?php the_ID(); ?>" <?php post_class("post post-content-full"); ?>> 
     <div class="portfolio-attachment"> 
      <?php 
      $pi_data = get_port_item_content(get_the_ID()); 
      $n = 0; 
      the_post_thumbnail(); 
      if ($pi_data) { 
       foreach ($pi_data as $content_info) { 
       switch ($content_info->type) { 
        case "image": 
        ?> 
         <div class="item image"><img 
         src="<?php echo $content_info->url?>"/></div> 
         <?php 
        break; 
        case "youtube": 
        //check to see if the video has any options, the ? sign 
        $has = strstr($content_info->url, "?"); 

        if (!$has) { 
         $embed = explode('"', $content_info->url); 
         // insert enablejsapi option 
         $embed[5] .= "?wmode=transparent"; 
         $embed = implode('"', $embed); 
        } else { 
         // insert enablejsapi option 
         $embed = str_ireplace("&", "&amp;", $content_info->url); 
         $embed = str_ireplace("?", "?wmode=transparent&amp;", $embed); 
        } 

        // get original dimensions 
        $pattern = "/height=\"[0-9]*\"/"; 
        preg_match($pattern, $embed, $matches); 
        $origHeight = preg_replace("/[^0-9]/", '', $matches[0]); 

        // compute new height 
        //$newHeight = $origHeight + 25; 
        $newHeight = $origHeight; 

        // adjust embed code 
        $pattern = "/height=\"[0-9]*\"/"; 
        $embed = preg_replace($pattern, "height='" . $newHeight . "'", $embed); 

        // insert an id for the iframe 
        $id = '<iframe id="ytplayer' . $n . '" '; 
        $embed = str_ireplace("<iframe ", $id, $embed); 
        ?> 
         <div class="item youtube fitvid"><?php echo $embed?></div> 
         <?php 
        break; 
        case "vimeo": 
        $embed = $content_info->url; 
        ?> 
         <div class="item vimeo fitvid"><?php echo $embed?></div> 
         <?php 
        break; 
       } 
       //end switch 
       $n++; 
       } //end for each 
      }//end if 
      ?> 
     </div> 
</div></div></div> 
<div class="pagewidth-single"> 
<div class="content single single-portfolio"> 
    <div class="post-content"> 
    <header class="content-headarea"> 
     <div class="content-headarea-title"> 
&nbsp; 
&nbsp; 
     <h1 class="post-title"><?php the_title(); ?></h1> 
     <ul class="portfolio-meta"> 
      <?php $client = get_post_meta(get_the_ID(), 'client', true); ?> 
      <?php if (!empty($client)) : ?> 
      <li class="client"> 
      <span class="portfolio-meta-heading"><?php _e('Client: ', 'framework'); ?></span> 
      <span><?php echo $client ?></span> 
      </li> 
      <?php endif; ?> 
      <?php $date = get_post_meta(get_the_ID(), 'date', true); ?> 
      <?php if (!empty($date)) : ?> 
      <li class="date"> 
      <span class="portfolio-meta-heading"><?php _e('Date: ', 'framework'); ?></span> 
      <span><?php echo $date ?> </span> 
      </li> 
      <?php endif; ?> 
      <?php $lproj = get_post_meta(get_the_ID(), 'url', true); 
      if (!empty($lproj)) : 
      ?> 
      <li class="launch"> 
      <span class="portfolio-meta-heading"><?php _e('url', 'framework'); ?></span> 
      <a href="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>" 
       class="superlink" 
       title="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>"> 
       <?php echo get_post_meta(get_the_ID(), 'url', true); ?> 
      </a> 
      </li> 
      <?php endif; ?> 
     </ul> 
     </div> 
    </header>  
     <div class="blog-post"> 
      <div class="full-post"> 
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
       <?php the_content(); ?> 
      <?php endwhile; ?> 
      <?php else:?> 

      <?php endif; ?> 
      </div> 
     </div> 

     <?php get_template_part('/includes/share'); ?> 
     <?php comments_template(); ?> 

     <nav id="post-nav"> 
      <div class="post-nav-inner"> 
      <div class="nav-previous"><?php next_post_link('%link', __('Next Post &rarr;', 'framework')); ?></div> 
      <div class="nav-next"><?php previous_post_link('%link', __('&larr; Previous Post', 'framework')); ?></div> 
      <div class="clearfix"></div> 
      </div> 
     </nav> 

     </article> 
    </div> 
    </div> 
</div> 

だから私は、全幅background'ish半分セクションとして機能を備えた画像を維持しながら、以降のページのタイトルから、<header>セクションにオーバーレイを開始するために探しています。私はイメージが基本的に画面を覆うことを避けたいので、スクロールダウンする必要なしにコンテンツの開始を見ることができます。

Answer 1

コンテンツボックスのCSSを少し変更してこれを実現する方法はありますか？たぶん位置やZ-インデックスを変更していますか？

はい、position: relativeとtop: {n}pxで位置を簡単に変更できます。このCSSを追加してみてください：

div.pagewidth-single div.post-content { 
    position: relative; 
    top: -150px; 
}