Solved

adding in background image on body of page

Posted on 2013-06-19
3
526 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

How our DevOps Teams Maximize Uptime

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Date on a table 16 33
Timer on div 5 23
Syntax error creating JSON recordset 4 26
How to remove a section of the main menu from Magento 1.9.3 3 26
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

756 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