Support » Themes and Templates » Adding a background image to content area of Twenty Ten

  • I am trying to create a custom page template and add an background image to the content area of Twenty Ten of my home page. I cannot tell what part of the CSS needs to be modified to do this.

    If I add a background image in this part of the style.css, I get the background image to display on every page.

    `#main {
    clear: both;
    overflow: hidden;
    padding: 40px 0 0 0;
    }`

    So I tried duplicating it and naming it #main2 which I would only put in the new template I’ve created, but it does not work. Below is the code I have on the template page. Ultimately, I don’t understand what the “role” is.

    `<div id=”container”>
    <div id=”content” role=”main”>`

    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator t-p

    (@t-p)

    try adding to this CSS element:

    .entry-content, .entry-summary {

    Thread Starter yazmincoveney

    (@yazmincoveney)

    That put the background behind the text not in the whole content area.

    The site I am working on is not published, but here is a mock up of what I am trying to do. This is a large jpg and not a WP site: http://www.zupababy.com/hl/home_navy.htm

    Thread Starter yazmincoveney

    (@yazmincoveney)

    I should add that the above suggestion added the background to all the pages. Not just the home page.

    try:
    .page-template-mynewtemplate-php #main { ... }

    instead of ‘mynewtemplate’ use the compressed template name (small letters only, no spaces) of your own template;
    you will find this specific body class when you look at the code of your page in the browser.

    Thread Starter yazmincoveney

    (@yazmincoveney)

    Not sure if I understood correctly, but in my css I added (my custom template page is called main.php)

    `.page-template-main #main {
    clear: both;
    overflow: hidden;
    padding: 40px 0 0 0;
    background-image:url(images/home_bg.jpg);
    }`

    Then in the custom template page, I left the code:

    `<?php
    /*
    Template Name: Main Page
    */

    get_header(‘main’); ?>

    <div id=”container”>
    <div id=”content” role=”main”>

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
    <?php if ( is_front_page() ) { ?>
    <h2 class=”entry-title”><?php the_title(); ?></h2>
    <?php } else { ?>
    <h1 class=”entry-title”><?php the_title(); ?></h1>
    <?php } ?>

    <div class=”entry-content”>
    <?php the_content(); ?>
    <?php wp_link_pages( array( ‘before’ => ‘<div class=”page-link”>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ‘</div>’ ) ); ?>
    <?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
    </div><!– .entry-content –>
    </div><!– #post-## –>

    <?php endwhile; ?>

    </div><!– #content –>
    </div><!– #container –>

    <?php get_footer(); ?>`

    Thread Starter yazmincoveney

    (@yazmincoveney)

    I forgot the above did not work.

    can you post a link to your site?
    particular to the page that uses the template main.php?

    imho, the css should be:

    .page-template-main-php #main {
    clear: both;
    overflow: hidden;
    padding: 40px 0 0 0;
    background-image:url(images/home_bg.jpg);
    }

    (as i said, you can check this when you open the page in the browser, and then, on the browser tool bar, click ‘View’ and then ‘Source’ or ‘Page Source’ (or press ‘ctrl u’ in firefox);
    you should find a line starting with <body class=" which should have several css classes, one of them should be ‘page-template-main-php’)

    what is working so far?
    and what is not working?

    Thread Starter yazmincoveney

    (@yazmincoveney)

    That did it!

    Thank you, thank you!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding a background image to content area of Twenty Ten’ is closed to new replies.