custom theme with 2 background images

  • Hi all

    I have a problem. I’m creating a custom theme. But I can’t seem to manage it in wordpress. I have a website in html and I’m converting it to wordpress. So far so good.

    I have the style and menus working, I’m not entirely happy with the menu design have to fix that.

    The website has 2 background images. One large, a wall and one small, peace of paper on that wall. All the text appears on that small peace of paper image. I have it working in html but for the live of me I can’t transcode it to wordpress.

    I thought I use the small peace as background image in the single.php & page.php and the large as background image in the index.php.

    I added the custom background in the functions. But I only got a white bg not the image. 

    //custom-background wall
	add_theme_support( 'custom-background' );
	$defaults = array(
	'default-image'          => '%1$s/img/wall.gif',
	'wp-head-callback'       => '_custom_background_cb',
	'admin-head-callback'    => '',
	'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

    Then I thought I use <div style=”background-image: for the index.php. But nothing.
    I think I’m missing something but I can’t figure it out…

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter cd_BE

    (@cd_be)

    Luckily, sometimes being an idiot is a good thing…

    I had to use my style.css.

    /* OVERALL */
body {background: url('img/wall.gif') repeat top center;}

    Sadly my content area is all over the page. It should be 890px centered and the background (wall.gif’) may be seen left & right depending on the viewer screen.
    So when I add
    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/page_post_bg.png") to my page.php it shows under the content, obviously…

    I need to place the_content above this image, in some sort of locked position.

    So I tried this in the page.php

    <style type="text/css">
body
{
    background-image:url('<?php bloginfo('stylesheet_directory'); ?>/img/page_post_bg.png")?>');
}
</style>

    but that doesn’t seem to work.

    Thread Starter cd_BE

    (@cd_be)

    This is getting frustrating…

    I know how to do it in html. Got it working and all.

    <body bgcolor="#000000" background="img/wall.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><br>
<center>
<table width="1000" height="800" border="0" cellpadding="0" cellspacing="0" background="img/page_post_bg.png">
<tr>
<td></td>
</tr>
</table></center>

    But how to translate this to wordpress.php is getting lost on me.

    I think I should somehow say in /php that

    <?php the_post(); ?>

                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                    <div class="entry-content">
<?php the_content(); ?>

    should be in the place of the <tr>
    <td></td>
    </tr>

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser. You can apply the second image using the classes generated by post_class().

    Or you can add & use another wrapper div to act as a hook for your second background image. Have a look at https://quirm.net/themes/billposter/ for some ideas.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘custom theme with 2 background images’ is closed to new replies.