WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Different backgrounds for different pages but only one template (3 posts)

  1. iversoncru
    Member
    Posted 11 months ago #

    Hi there!
    Today i have been trying to make 4 different pages, with a different background each, but only using one template.

    I came up with this piece of code:

    <?php get_header(); ?>
    	<div id="service_wrap_content">
    		<?php
    			$args = array(
    				'post_type' => 'attachment',
    				'order' => 'ASC',
    				'post_mime_type' => 'image',
    				'post_parent' => get_the_ID()
    			);
    			$images = get_posts($args);
    			if ($images)
    			{
    				echo '<div id="service-background">';
    				$i = 0;
    				foreach ($images as $image)
    				{
    					echo '<img id="' . $i . '" src="' . $image->guid . '" width="960" height="674" />';
    					$i ++;
    				}
    				echo "</div>";
    				// make image the background of the div#service_wrap_content
    				echo '<script>';
    				echo '$("#service_wrap_content").css("background-image", "url(" + $("#0").attr("src") + ")");';
    				echo '</script>';
    			}
    		?>
    		<article id="service">
    			<?php
    				$page_id = get_the_ID();
    				$page = get_page($page_id);
    			?>
    			<h2> <?php echo $page->post_title ?></h2>
    
    			<div id="service_content">
    				<?php echo apply_filters("the_content", $page->post_content);?>
    			</div>
    
    		</article>
    	</div>
    <?php get_footer(); ?>

    Could anyone see what's missing or wrong?

    This is the css:

    #service_wrap_content{
    	margin: 3% 10% 3% 10%;
    }
    #service{
    	padding-top: 6%;
    	margin-left: 29%;
    	width: 45%;
    }
    #service h2{
    	font-family: 'Sverige';
    	font-size: 2.2em;
    	line-height: 1.1em;
    	color: #ff2562;
    
    }
    #service_content{
    	font-family: 'Eraslght';
    	font-size: 1.7em;
    	line-height: 1.3em;
    	margin-top: 7%;
    }

    thanks in advance for your time.

  2. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Might be easier to use a page-specific class in the CSS - i.e. something like:

    body.page-id-5 {
       background... ;
    }
  3. iversoncru
    Member
    Posted 11 months ago #

    this is how i managed, i hope it helps!!

    <?php
    	$page_id = get_the_ID();
    	$page = get_page($page_id);
    ?>
    <?php $image_id = get_post_thumbnail_id(); ?>
    <?php $image_url = wp_get_attachment_image_src($image_id,'full'); ?>
    <?php $image_url[0]; ?>
    <div id="service_wrap_content" style="background:url(<?php echo $image_url[0]; ?>) no-repeat center center; height:674px ;">
    <article id="service">
    	<h2> <?php echo $page->post_title ?></h2>
    	<div id="service_content">
    		<?php echo apply_filters("the_content", $page->post_content);?>
    	</div>
    </article>

Reply

You must log in to post.

About this Topic

Tags

No tags yet.