Background repeat after footer

  • When I have a page that doesn’t require vertical scrolling, sometimes it is so short (on certain monitors/resolutions), that the footer doesn’t touch the bottom of the screen. This is fine. However, on such pages, the the background image that the footer and everything else sits on does continue.

    How can I get it so that after the footer, the background image stops?

    Thanks.

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter mithrustt

    (@mithrustt)

    Anybody?

    It’s difficult to tell without seeing your code.

    Make sure the footer div is not inside the div that has the background image.

    You’ve probably assigned the background image to the body tag. This won’t let you achieve what you’re trying to achieve; you need to assign it to a div that will end before the footer div.

    Thread Starter mithrustt

    (@mithrustt)

    Sorry, I always forget to include code:

    HEADER:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" <?php if (function_exists('language_attributes')) { language_attributes(); } ?>>

<head profile="https://gmpg.org/xfn/11">

    <title><?php bloginfo('name'); ?><?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> | <?php } ?><?php wp_title(''); ?>
    </title>

    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />

    <!--[if lt IE 7]>
	    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" media="screen, projection">
    <![endif]-->

    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon2.ico" />

    <?php wp_head(); ?>

</head>

<body>   <!--start body-->

    <div class="container">   <!--start container-->

        <div id="header" class="column span-14">

<div id="topmenu">

<div id="search_menu" class="column span-6 last push-0">

                <div id="search" class="column first">

                    <div id="search-form">
                        <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

						<div><label for="s" class="none">Search for:</label>
						<input type="text" name="s" id="s" class="search_input" value="<?php the_search_query(); ?>" />

						<label for="searchsubmit" class="none">Go</label>
						<input type="submit" id="searchsubmit" class="submit_input" value="" /></div>

                        </form>
                    </div>
                </div>

            </div>

			<div class="menu_links">

<a href="https://think-theory.com">HOME</a><a href="https://www.savingprogress.com/forums/index.php">FORUMS</a><a href="https://www.savingprogress.com/reviews">REVIEWS</a><a href="https://www.savingprogress.com/columns">COUMNS</a><a href="https://www.savingprogress.com/ranking-system">RANKING SYSTEM</a><a href="https://www.savingprogress.com/staff-profiles">STAFF PROFILES</a><a href="https://www.savingprogress.com/donate">DONATE</a><a href="<?php bloginfo('url'); ?>/wp-admin">LOGIN</a><a href="https://savingprogress.com/wp-login.php?action=register">REGISTER</a>

			</div>
		</div>

            <div id="topbanner">

        </div>

<div id="headline_bg">

<?php $the_query = new WP_Query('cat=37, 39, 40&showposts=5&orderby=post_date&order=desc');

					while ($the_query->have_posts()) : $the_query->the_post();

					$do_not_duplicate = $post->ID; ?> 

						<div class="headline_spacing">                             

<?php if ( get_post_meta($post->ID, 'headline_img', true) ) { ?>

						<div class="headline_img"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/headline/<?php echo get_post_meta($post->ID, "headline_img", $single = true); ?>" alt="<?php the_title(); ?>" /></a></div>

<?php } ?>
                                </div>	

					<?php endwhile; ?>            	

            	</div>

  <!--end header-->

    MAIN INDEX TEMPLATE:

    <?php get_header(); ?>        

        <div id="topbanner" class="column span-14">   <!-- start top banner -->

        </div>   <!-- end top banner -->

        <div id="arch_content" class="column span-14">   <!-- start home_content -->

        <?php if (have_posts()) : ?>

        	<div class="column span-3 first">
            	<h2 class="archive_name"><?php bloginfo('name'); ?></h2>        

            	<div class="archive_meta">

            		<div class="archive_feed">
            			<a href="<?php bloginfo('rss2_url'); ?>">RSS feed for <?php bloginfo('name'); ?></a>
            		</div>

            	</div>
            </div>

            <div class="column span-8">

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

            	<div class="archive_post_block">
            		<h3 class="archive_title" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>

            		<div class="archive_post_meta">By <?php the_author_posts_link(); ?> <span class="dot">&sdot;</span> <?php the_time('F j, Y'); ?> <span class="dot">&sdot;</span> <a href="<?php comments_link(); ?>"><?php comments_number('Post a comment','One comment','% comments'); ?></a></div>

            		<?php the_excerpt(); ?>
            	</div>

            	<?php endwhile; ?>

				<div class="navigation">
					<p><?php next_posts_link('&laquo; Previous') ?> &nbsp; <?php previous_posts_link('Next &raquo;') ?></p>
				</div>

				<?php else : ?>

					<p>Lost? Go back to the <a href="<?php echo get_option('home'); ?>/">home page</a>.</p>

				<?php endif; ?>

            </div>

            <?php get_sidebar(); ?>

        </div>   <!-- start home_content -->

<?php get_footer(); ?>

    FOOTER:

    <div id="footer" class="column span-14">

        	<div class="footer_info">
        		© <a rel="license" href="https://creativecommons.org/licenses/by/3.0/">Copyright</a> 2007-2008, Saving Progress. All rights reserved. <a href="https://savingprogress.com/about-us/">About Us</a> | <a href="https://savingprogress.com/contact-us/">Contact Us</a> | <a href="https://savingprogress.com/affiliate/">Affiliate</a> | <a href="https://savingprogress.com/jobs/">Jobs</a> | <a href="https://savingprogress.com/feed/">RSS</a> | <a href="https://savingprogress.com/comments/feed/">Comment RSS</a>
        	</div>

        </div>

    </div>   <!--end container-->

<?php wp_footer(); ?>

</body>  <!--end body-->

</html>

    I was actually trying to do what you mentioned, but wasn’t exactly sure what I needed to do.

    That’s a lot of code… and no sign of the style.css.

    Rather than post chunks of code here, you might want to use https://wordpress.pastebin.ca/ which makes it easier to read.

    Now, about that CSS file?

    Thread Starter mithrustt

    (@mithrustt)

    Ah, sorry. Never heard of the pastebin until now.

    https://wordpress.pastebin.ca/1020345

    No, it’s the kind of thing you only hear about after you paste 3 pages of code into WordPress forums ??

    Your problem, as I suspected, seems to be line 28:
    background-image: url(images/bg/body_main.gif);

    You may get better results moving it outside the body selector and into the container div:

    div.container {
    background-image: url(images/bg/body_main.gif) repeat-y center;
}

    Then leave only the background-color reference in the body CSS.

    Edit: corrected code :/

    Thread Starter mithrustt

    (@mithrustt)

    Do you mean move it in the CSS file or put the actual background image in the header.php?

    I copied that code you put and put it in my CSS as I didn’t have container class, but now I have no background image.

    Sorry — I went back and edited my CSS.

    Thread Starter mithrustt

    (@mithrustt)

    Well, I figured you meant to get the repeat and position in there and did that too. But, there’s still no background. Could it have something to do with where the <div class=’container’> is located in the header.php?

    I don’t think so, because the container div doesn’t end until the footer.php. I think I’d struggle to be of more help without seeing the actual site.

    Thread Starter mithrustt

    (@mithrustt)

    https://www.think-theory.com

    Sorry, I always forget to include something, whether that’s a link to the site or the code I’m talking about. ??

    Just about to go home for the day — try one more thing? Otherwise I’ll have another look on Monday ??

    find the code in footer.php:

    </div>
<!--end container-->

    and add another <div>:

    </div>
</div>
<!--end container-->

    There don’t seem to be enough at the moment.

    If this brings the image back, try moving the footer div outside the last </div> (before the </body>).

    Hope this helps… bye! ??

    Thread Starter mithrustt

    (@mithrustt)

    Unfortunately it didn’t.

    Anyone else have any ideas?

    It looks fine now. What did you do?

    Thread Starter mithrustt

    (@mithrustt)

    I didn’t do anything. It’s just that the page has to be so short that no scrolling is necessary and it doesn’t reach the bottom of the screen.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Background repeat after footer’ is closed to new replies.