WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS background url help (9 posts)

  1. desk003
    Member
    Posted 8 years ago #

    The site is http://photoblog.desk003.com

    The css file is at http://photoblog.desk003.com/wp-content/themes/blueblurry/style.css

    The three images are:
    http://photoblog.desk003.com/wp-content/themes/blueblurry/photoblog_bkg_top.png
    http://photoblog.desk003.com/wp-content/themes/blueblurry/photoblog_bkg_mid.png
    http://photoblog.desk003.com/wp-content/themes/blueblurry/photoblog_bkg_bottom.png

    Problem is, I can't get them to show up correctly. They all show, but they don't sit right or play nicely together. I've never tried background-url, so I have no idea why. Thanks in advance!

  2. katie1
    Member
    Posted 8 years ago #

    you need to check out this site - has a billion and one copy & paste tutorial about inserting images in blogs.

    Mandarin Design: Group images & thumbnails

  3. desk003
    Member
    Posted 8 years ago #

    <b>@katie:</b> That's not what I'm trying to do. I'm trying to use images as the background for my template.

  4. katie1
    Member
    Posted 8 years ago #

    <body>
    <center>
    <div id="wrap">
    <div id="header">
    <div class="headtext">
    <div class="alignleft"></div>
    <div class="alignright"></div>
    </div><!--closes headtext-->
    </div><!--closes header-->
    <div id="content">

    <div id="footer"></div>
    </div><!--closes content-->
    </div><!--closes wrap-->
    </center>
    </body>
    </html>

    CSS
    Tweaked your margins and added height to your images - the rest remains by and large the same:

    #wrap {
    width: 905px;
    margin:0;
    padding:0;
    }

    #header {
    background: url("photoblog_bkg_top.png") no-repeat bottom;
    border: none;
    height: 38px;
    font-size: x-small;
    font-weight: bold;
    padding-top: 4px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 0px;
    margin-top:5em;
    }

    #content {
    background: url("photoblog_bkg_mid.png") repeat-y top;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-top:-19px;
    margin-bottom:-19px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    }

    #footer {
    background: url("photoblog_bkg_bottom.png") no-repeat bottom;
    border: none;
    height:60px;
    width:900px;
    margin: 0 auto 0 auto;
    text-align: center;
    font-size: x-small;
    font-weight: normal;
    padding-bottom: 0px;
    clear: both;
    }

  5. desk003
    Member
    Posted 8 years ago #

    Well, it looks better, anyway.

  6. desk003
    Member
    Posted 8 years ago #

    Removed & Changed some of the css you gave me.
    #wrap {
    width: 905px;
    margin: 0;
    padding: 0;
    }
    /* 1. End Global */

    /* 2. header.php */
    #header {
    background: url("photoblog_bkg_top.png") no-repeat bottom;
    border: none;
    height: 38px;
    font-size: x-small;
    font-weight: bold;
    padding: 8px 3px 0px 3px;
    margin: 0;
    }
    #header a, #header a:visited {
    text-decoration: none;
    }
    .headtext {
    width: 850px;
    padding-top: 14px;
    }
    /* 2. End header.php */

    /* 3. index.php */
    #content {
    background: url("http://photoblog.desk003.com/wp-content/themes/blueblurry/photoblog_bkg_mid.png") repeat-y top;
    border: none;
    margin: -10px auto -10px auto;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    }
    /* 3. End index.php */

    /* 4. footer.php */
    #footer {
    background: url("http://photoblog.desk003.com/wp-content/themes/blueblurry/photoblog_bkg_bottom.png") no-repeat bottom;
    border: none;
    height: 60px;
    width: 900px;
    margin: 0 auto 0 auto;
    text-align: center;
    font-size: x-small;
    font-weight: normal;
    padding-bottom: 0px;
    clear: both;
    }
    #footer a, #footer a:visited {
    text-decoration: none;
    }
    #footer img, #footer img a, #footer img a:visited, #footer img a:hover {
    border-width: 0px;
    padding: 0px;
    display: inline;
    }
    .ftext {
    padding-top: 13px;
    }
    /* 4. End footer.php */

    Thanks for the help, without that I would not have had anything!

  7. desk003
    Member
    Posted 8 years ago #

    However I think I see why you had a larger negative top margin, to make it show right in IE. That, however, screwed it up and made it overlap in firefox & safari, which is the audience I care more about. Thanks for your help :)

  8. katie1
    Member
    Posted 8 years ago #

    That's the beauty of wordpress - the software allows us to play with stuff, tweaking themes continually until the page presents the way YOU want it to. Oh, and reading external stuff (websites and tutorials by experts) helps, also.

    At the time of posting everything displayed correctly AND beautifully in FF, Moz, Opera, Net AND IE6 using (800x600) & (1024x600) screens, as well as my own 21inch screen which I haven't the faintest what that converts to in english...

  9. moshu
    Member
    Posted 8 years ago #

    Don't post long code, pleeease :)
    use http://pastebin.com or similar services.

Topic Closed

This topic has been closed to new replies.

About this Topic