Solved

adding in background image on body of page

Posted on 2013-06-19
3
530 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

630 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