Grow your CSS skills. Land your dream job.

[Solved] First WordPress Theme

  • # February 5, 2010 at 7:37 pm

    Hi,

    I’ve been working my way through my first theme with screencast #26

    For some reason though, I am not able to get to my background image to show (and reapeat-x).

    Using XXAMP and localhost, I have copied Chris’s recommended CSS reset, but still no luck.

    My conclusion is that I’ve done something wrong with the CSS (or it’s something in the header??)

    Here’s my CSS – can you see anything wrong? (Header CSS is below that)
    +++++++++++++++

    /*
    RESET
    */

    * { margin: 0; padding: 0; }
    html { overflow-y: scroll; }
    html, body { height: 100%; }
    body { font-size: 62.5%; font-family: Arial, sans-serif; color: #272727; background: url(‘/images/header_bg.png’) top center repeat-x white; }
    ul { list-style: square inside; }
    ol { list-style: decimal inside; }
    a { outline: none; text-decoration: none; }
    a img { border: none; }
    img { vertical-align: middle; }
    table { border-collapse: collapse; }

    /*
    UTILITY
    */

    .floatLeft { float: left; }
    .floatRight { float: right; }
    .clear { clear: both; }
    .button { border: 1px solid #272727; background: white; padding: 3px 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #272727; }
    .button:hover { background: #990000; color: white; }

    /*
    STRUCTURE
    */

    #page-wrap { width: 960px; margin: 0px auto -250px; min-height: 100%; height: auto !important; height: 100%; }
    #push { height: 250px; }


    <!–HEADER CSS–>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml&quot; <?php language_attributes(); ?>>

    <head profile="http://gmpg.org/xfn/11"&gt;

    <title>
    <?php if (is_home()) { echo bloginfo(‘name’);
    } elseif (is_404()) {
    echo ’404 Not Found’;
    } elseif (is_category()) {
    echo ‘Category:’; wp_title(”);
    } elseif (is_search()) {
    echo ‘Search Results’;
    } elseif ( is_day() || is_month() || is_year() ) {
    echo ‘Archives:’; wp_title(”);
    } else {
    echo wp_title(”);
    }
    ?>
    </title>

    <meta http-equiv="content-type" content="<?php bloginfo(‘html_type’) ?>; charset=<?php bloginfo(‘charset’) ?>" />
    <meta name="description" content="<?php bloginfo(‘description’) ?>" />
    <?php if(is_search()) { ?>
    <meta name="robots" content="noindex, nofollow" />
    <?php }?>

    <link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_url’); ?>" media="screen" />
    <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’); ?>" />

    <?php wp_head(); ?>

    </head>

    <body>

    <h1>
    <a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>

    # February 6, 2010 at 5:11 am

    If the css file is in a folder and your images are in another folder called images, the path to show your images from the css file would be

    Code:
    background: url(../images/header_bg.png) repeat-x;

    If the css file is in the same file as the index file and the images are in the "images" folder, the path would be

    Code:
    background: url(images/header_bg.png) repeat-x;
    # February 6, 2010 at 4:50 pm

    Thx – problem solved.

    Part of the problem was that I was redirecting to a reset file from the style.css
    File permissions may have been a issue too.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".