WordPress.org

Forums

Getting rid of Kubrickbg/Kubrickbgwide behind header and footer (6 posts)

  1. runmad
    Member
    Posted 8 years ago #

    Please see: http://blog.runmad.com

    I have changed the kubrick images and have used PNGs instead of JPGs. This way I can have picture on the background and still have a soft shadow. Problem now, is that Kubrickbg and Kubrickbgwide (depending on which of the two pages you visit) are visible behind the header and footer. My question is whether there is someway to not have the background start all the way at the top and go all the way to the bottom, but only start under the header and go to the footer, so that there is no double shadow on the side of the header and those sharp edges are gone in the top and bottom.

    Here is the code, which has only been changed with the png files:

    body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); } <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.png") repeat-y top; background-position: 0px 300px; border: none; } <?php } else { // No sidebar ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.png") repeat-y top; border: none;} <?php } ?>
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.png") no-repeat bottom center; }
    #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.png") no-repeat bottom; border: none; }

    Hope someone has the solution... Thank you.

  2. treehuggerish
    Member
    Posted 8 years ago #

    I have exactly the same problem, a solution would be awesome :D

  3. mendezki
    Member
    Posted 8 years ago #

    Yes, and it's a quicky but requires some editing:

    1. Move the start of the <div id="page"> from before to after the <div id="header"> in your header.php file, going from this:

    <div id="page">
    
    <div id="header">
    	<div id="headerimg">
    		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    		<div class="description"><?php bloginfo('description'); ?></div>
    	</div>
    </div>
    <hr />

    ...to this

    <div id="header">
    	<div id="headerimg">
    		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    		<div class="description"><?php bloginfo('description'); ?></div>
    	</div>
    </div>
    <hr />
    <div id="page">

    ...which will give some strange results at first, you'll find the header floating to left and showing some space between the header and the rest of the page. To correct this edit your style.css file:

    2. First, to make the header align to the center of the page again, find this stuff in your style.css file

    #header {
    	background-color: #73a0c5;
    	margin: 0 0 0 1px;
    	padding: 0;
    	height: 200px;
    	width: 758px;
    	}

    and change the margin part to

    margin: 0px auto;

    3. Then, to close the gap between the header and the rest of the page, find the following in your style.css file

    #page {
    	background-color: white;
    	margin: 20px auto;
    	padding: 0;
    	width: 760px;
    	border: 1px solid #959596;
    	}

    And change the margin part to

    margin: 0px auto 20px auto

    And you're all set! (I guess).

  4. treehuggerish
    Member
    Posted 7 years ago #

    Like magic! thanks a bunch!

  5. bigeyedphish
    Member
    Posted 7 years ago #

    I am having the same problems with the blue lines showing up on either side of my header image. I tried the suggestion above, modifying header.php and style.css, but it didn't seem to do anything.

    You can view the page here: http://disposablenonsense.com/

    I would appreciate any other suggestions! Thanks.

  6. bigeyedphish
    Member
    Posted 7 years ago #

    I ended up changing all the header colors to #E3E3E3, and now you can't even tell.

Topic Closed

This topic has been closed to new replies.

About this Topic