So I want to show my content showing over my image, but only slightly. So in a sense the image would look like it was partly the background of the page. I do not want my content box to stretch over the full width of the page like the image currently does however.
This is the page I am working on; http://outside.hobhob.uk/test/?portfolio=mind-the-gap-2
This is what I am aiming to have it look similar to (focusing just on how the content text box is slightly over the image): https://s32.postimg.org/ytavty67p/13340631_10154339496581336_223276410_o.jpg
Is there a way I can achieve this with maybe changing the css of the content box slightly? Maybe changing the position or z-index?
The code of the page is currently working in a typical way, I am also using Visual Composer to lay out the content in the page, so this may help me achieve this in a easier way?
<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("&", "&", $content_info->url);
$embed = str_ireplace("?", "?wmode=transparent&", $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">
<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 →', 'framework' ) ); ?></div>
<div class="nav-next"><?php previous_post_link( '%link', __( '← Previous Post', 'framework' ) ); ?></div>
<div class="clearfix"></div>
</div>
</nav>
</article>
</div>
</div>
</div>
So I am looking to start the overlay on the <header> section, from the page title onwards, while keeping the featured image as the full width background'ish half section. I want to avoid having the image basically cover the screen and so you can begin to see the content starting without needing to scroll down.
Is there a way I can achieve this with maybe changing the css of the content box slightly? Maybe changing the position or z-index?
Yes, you can change the position pretty easily with position: relative and top: {n}px. Try adding this CSS:
div.pagewidth-single div.post-content {
position: relative;
top: -150px;
}