Solved

adding in background image on body of page

Posted on 2013-06-19
3
522 Views
Last Modified: 2013-06-22
hi guys,

i want to add an image as background in the body of my wordpress site, how do i do that i am using theattached code  as a template

<?php
/*
Template Name: My Custom Indexer Page
*/

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php //comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>

<div class="photos_videos">   
       <h2>PHOTOS &amp; VIDEOS</h2>
      <div id="banner-fade">
        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
       <?php  query_posts("cat=4"); 
         while (have_posts()) : the_post(); ?>
         <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
        <li><a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" title="<?php the_title(); ?>"></a> </li>
         <?php endwhile;
	    wp_reset_query(); ?>
      
        </ul>
        <!-- end Basic jQuery Slider -->
      </div>  
     </div> <!-- #photos_videos -->  
    <div class="widget widget_foo_widget new1" id="foo_widget-2" >
    <h3>Latest News</h3>
   <?php query_posts("cat=3&showposts=3"); 
         while (have_posts()) : the_post();
		echo '<h2><a href="'.get_permalink().'">'.get_the_title().'</a><span>'.get_the_date('d-M-Y').'</span></h2>';
		echo '<p>'.substr(get_the_excerpt(),0,100).'...</p>';
		endwhile;
		wp_reset_query(); ?>
    </div>
	<div class="box_row4">
            	
                   <!--<a href="#"><img src="<?php //bloginfo('template_url') ?>/images/oxygen_map.png"></a>
            
                
                     <a href="#"><img src="<?php //bloginfo('template_url') ?>/images/wexford_img.png"></a>
                
          	      <a href="#"><img src="<?php //bloginfo('template_url') ?>/images/booking_forms.png" style="margin-right:0px;"></a>-->
                  
                  <a href="http://www.piratescove.ie/competitions-2/"><div class="red1">Competitions</div></a>
                  <a href="http://www.courtownharbour.com" title="Courtown Harbour Website"><div class="green1">Courtown Harbour</div></a>
                  <a href="http://www.piratescove.ie/hire-us/"><div class="blue1" style="margin-right:0px;">Hire Us</div></a>
                  
                  
             
            </div>
   </div><!-- #content -->
      
        
	</div><!-- #primary -->


     
	 


<?php get_sidebar(); ?>
<?php get_footer(); ?>

Open in new window


thanks
0
Comment
Question by:jonathanduane2010
3 Comments
 
LVL 36

Assisted Solution

by:SidFishes
SidFishes earned 132 total points
ID: 39259920
I'm not a php or wordpress guy but you generally need to define the body in css which I don't think you can do on that template as it looks like it's an include inside the body tag

In your main template (or associated style sheet) you'd add something like (depends on how you want your background to look)

body {
      width:100%;
      margin:auto;
      background: url('images/bg-body.jpg') no-repeat center center fixed;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 131 total points
ID: 39259934
If your only looking to do it on that particular page or page-template, then you would use the WordPress body classes.


body.my-template-php{
width:100%;
      margin:auto;
      background: url('images/bg-body.jpg') no-repeat center center fixed;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;

Open in new window

0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 132 total points
ID: 39261906
Just style the body normally by adding something like the following to your styles.css file:

body { background: url(someBackgroundImage.jpg) repeat left top #ffffff; }

Make sure the image is in your template folder...
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now