layerd backgrounds in css ?

knowlesy · 1 Jun 2009 at 21:43

is it possible to place one background image behind another background image in css ? if so how ?

knowlesy · 4 Jun 2009 at 21:17

Code:

body {
    background:url (images/background.png);
#test{
    background:url(images/page-back.png) no-repeat top center;
  }  
margin:0;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    
}

is this what you guys ment ?

knowlesy · 5 Jun 2009 at 00:22

it dosent appear to be working still ... if i pasted my css and index could some one throw me a helping hand ?

I want the background.png to be behind the page-back.png

css

Code:

body {
    background:url (images/background.png) repeat;
    background:url(images/page-back.png) no-repeat top center;
    margin:0;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    
}
#container {
    width:819px;
    margin:0 auto;
    position:relative;
    height:252px;
}

/* search form */

#search {
    position:absolute;
    text-align:right;
    width:250px;
    left:520px;
    top:10px;
    z-index:100;
}
#search form {
    padding:0;
    margin:0;
}
#search .txtField {
    border:1px solid #fff;
    width:138px;
    margin:0;
    padding:3px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;
    background:url(images/search-back.gif) transparent;
}
#search .btnSearch {
    border:1px solid #fff;
    color:#fff;
    margin:0;
    padding:2px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:11px;
    background:url(images/btn-back.gif) transparent;
}


/* menu */

#menu-holder {
    position:absolute;
    top:43px;
    left:457px;
    width:319px;
    overflow:hidden;
}
#menu {
    width:319px;
    height:42px;
    margin:0;
    padding:0;
    position:relative;
}
#menu li {
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    top:0;
}
#menu li, #menu a {
    height:42px;
    display:block;
}
#home {
    text-indent:-300em;
    overflow:hidden;
    left:0px;
    width:107px;
}
#about {
    text-indent:-300em;
    overflow:hidden;
    left:107px;
    width:107px;
}
#archives {
    text-indent:-300em;
    overflow:hidden;
    left:214px;
    width:106px;
}



#home a:hover {
    background:transparent url(images/menu.jpg) 0px 0px no-repeat;
}
#about a:hover {
    background:transparent url(images/menu.jpg) -107px 0px no-repeat;
}
#archives a:hover {
    background:transparent url(images/menu.jpg) -214px 0px no-repeat;
}


/* blog title */

#title {
    position:absolute;
    top:149px;
    left:76px;
    color:#fff;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:10px;
    width:370px;
    overflow:hidden;
}
#title h2 {
    color:#fff;
    font-size:20px;
    margin:0 0 2px;
}
#title a {
    color:#fff;
    text-decoration:none;
}
#title a:hover {
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid #e7d8cf;
}


/* content */

#content {
    background:url(images/notepad-back.gif) repeat-y;
    width:764px;
    margin:0 auto;
    padding-right:55px;
}
#content blockquote {
    padding:0 0 0 30px;
    background:url(images/blockquote.gif) no-repeat 0 50%;
}
#content .col01 {
    float:left;
    padding-left:70px;
    width:425px;
    font-size:12px;
    line-height:20px;
}
#content .col01 h3 {
    font-size:24px;
    line-height:28px;
    font-weight:normal;
    font-family: Times New Roman, Times, Georgia, erif;
    margin:0;
    padding:0 0 10px;
    background:url(images/line.gif) repeat-x bottom;
}
#content .col01 h4 {
    font-size:18px;
    line-height:22px;
    font-weight:normal;
    font-family: Times New Roman, Times, Georgia, erif;
    margin:0;
    padding:0 0 16px;
    background:url(images/line.gif) repeat-x bottom;
}
#content .col01 h3 a {
    color:#000;
    text-decoration:none;
}
#content .col01 h3 a:hover {
    background-color:#f4f0db;
}
#content .col01 .post {
    padding-bottom:30px;
}
#content .col01 .thumbnail {
    float:right;
    margin:10px 0 10px 10px;
}
#content .col01 .meta {
    font-size:11px;
    text-align:right;
    background:url(images/line.gif) repeat-x;
    padding-top:8px;
}
#content .col01 .post-inner {
    position:relative;
}
#content .col01 .post-inner .date-tab {
    position:absolute;
    top:0px;
    left:-98px;
    height:64px;
    width:83px;
    background:url(images/date-tab.gif) no-repeat;
}
#content .col01 .thumbnail {
    float:right;
    margin:12px 0 12px 12px;
}
.month {
    text-align:right;
    display:block;
    padding:6px 16px 6px 0;
    font-size:11px;
}
.day {
    text-align:right;
    display:block;
    padding:4px 16px 2px 0;
    font-size:18px;
    font-weight:bold;
}
#content .col01 .post-inner a {
    color:#000;
    position:relative;
    text-decoration:none;
    border-bottom:1px solid #868585;
    background:#f4f0db;
}
#content .col01 .post-inner a:hover {
    color:#000;
    text-decoration:none;
    border-bottom:1px solid #000;
    background:#fffbc1;
}
#content .col01 .meta a {
    color:#000;
    text-decoration:none;
    border-bottom:1px solid #868585;
}
#content .col01 .meta a:hover {
    color:#000;
    text-decoration:none;
    border-style:none;
}


#content .col02 {
    float:right;
    width:212px;
    font-size:11px;
    line-height:16px;
}
#content .col02 .recent-posts {
    width:212px;
    background:url(images/postitBack.gif) repeat-y;
}
#content .col02 .recent-posts ul {
    padding:0;
    margin:0;
}
#content .col02 .recent-posts ul li {
    font-size:11px;
    line-height:18px;
    list-style:none;
    padding:0;
    margin:0;
}
#content .col02 .recent-posts ul li .listMeta {
    font-size:10px;
}
#content .col02 .recent-posts ul li a {
    color:#21565E;
    border-top:1px solid #ffffbe;
    display:block;
    width:170px;
    margin:0 auto;
    padding:4px 0 4px 25px;
    background:url(images/bullet-postit.gif) no-repeat 5px 8px;
}
#content .col02 .recent-posts ul li a:hover {
    text-decoration:none;
    color:#000;
    background:url(images/bullet-postit-on.gif) no-repeat 5px 8px #ff5092;
}
#content .col02 .postit-bottom {
    width:188px;
    height:62px;
    background:url(images/postit-bottom.gif) no-repeat;
    padding:12px 12px 0;
    font-size:11px;
    text-align:right;
}
#content .col02 .postit-bottom a {
    color:#21565E;
}
#content .col02 .postit-bottom a:hover {
    color:#21565E;
    text-decoration:none;
}

#content .col02 .categories-upper {
    height:124px;
    background:url(images/categories-upper.gif) no-repeat;
}
#content .col02 .categories {
    background:url(images/categories-back.gif) repeat-y;
}
#content .col02 .categories ul {
    margin:0;
    padding:0;
}
#content .col02 .categories ul li {
    font-size:11px;
    line-height:18px;
    list-style:none;
}
#content .col02 .categories ul li a {
    color:#21565E;
    margin:0 auto;
    display:block;
    width:170px;
    padding:4px 0 4px 25px;
    background:url(images/bullet-note.gif) no-repeat 5px 8px;
}
#content .col02 .categories ul li a:hover {
    text-decoration:none;
    color:#000;
    background:url(images/bullet-postit-on.gif) no-repeat 5px 8px #ff5092;
}
#content .col02 .categories-btm {
    height:68px;
    background:url(images/categories-btm.gif) no-repeat;
}


#content .col02 .links {
    background:url(images/txt-friends-links.gif) no-repeat 50% 8px;
    padding-top:20px;
}
#content .col02 .links ul {
    margin:0 0 20px;
    padding:0;
}
#content .col02 .links ul li {
    font-size:11px;
    line-height:18px;
    list-style:none;
    background:url(images/line-inner.gif) no-repeat bottom;
}
#content .col02 .links ul li a {
    color:#21565E;
    margin:0 auto;
    display:block;
    width:212px;
    padding:6px 0;
}
#content .col02 .links ul li a:hover {
    text-decoration:none;
    color:#000;
}

#content .col02 .side-meta {
    background:url(images/txt-misc-debris.gif) no-repeat top right;
}
#content .col02 .side-meta ul {
    margin:10px 0;
    padding:0;
}
#content .col02 .side-meta ul li {
    font-size:10px;
    line-height:14px;
    list-style:none;
}
#content .col02 .side-meta ul li a {
    color:#21565E;
    margin:0 auto;
    display:block;
    width:212px;
    padding:2px 0;
}
#content .col02 .side-meta ul li a:hover {
    text-decoration:none;
    color:#000;
}


/* footer */

#footer-holder {
    width:819px;
    margin:0 auto;
    position:relative;
}
#footer-holder .footer {
    width:932px;
    height:300px;
    position:absolute;
    top:0px;
    left:-54px;
    background:url(images/footer.png) no-repeat;
    z-index:100;
}
#footer-holder .txt a {
    color:#000;
}
#footer-holder .txt a:hover {
    color:#000;
    text-decoration:none;
}
#footer-holder .txt {
    width:480px;
    position:absolute;
    top:116px;
    left:186px;
    font-size:11px;
    line-height:16px;
    color:#000;
    z-index:105;
    height:60px;
    overflow:hidden;
}
#footer-holder .smashing a {
    width:66px;
    height:61px;
    position:absolute;
    top:160px;
    left:709px;
    font-size:11px;
    text-indent:-400px;
    z-index:102;
    overflow:hidden;
    background:url(images/logo-smashing.gif) no-repeat 0 0;
}
#footer-holder .smashing a:hover {
    background:url(images/logo-smashing.gif) no-repeat 0 -61px;
}
#footer-holder .rss a {
    width:55px;
    height:55px;
    position:absolute;
    top:165px;
    left:130px;
    font-size:11px;
    text-indent:-400px;
    z-index:103;
    overflow:hidden;
    background:url(images/icon-rss.gif) no-repeat 0 0;
}


/* next previous */

.previous a {
    float:left;
    width:93px;
    height:33px;
    text-indent:-400px;
    background:url(images/link-older.gif) no-repeat 0 0;
    overflow:hidden;
}
.previous a:hover {
    background:url(images/link-older.gif) no-repeat 0 -33px;
}
.next a {
    float:right;
    width:93px;
    height:33px;
    text-indent:-400px;
    background:url(images/link-newer.gif) no-repeat 0 0;
    overflow:hidden;
}
.next a:hover {
    background:url(images/link-newer.gif) no-repeat 0 -33px;
}


/* comment styles */

.comments, .name, .email, .website, .txt-email-sub, .txt-website-example {
    display:block;
    text-indent:-800px;
    font-size:10px;
    overflow:hidden;
    margin:0;
    padding:0;
}
.comments {
    height:27px;
    background:url(images/txt-your-comment.gif) no-repeat;
}
.name, .email, .website {
    width:80px;
    float:left;
    margin-right:12px;
    clear:left;
}
.name {
    height:30px;
    background:url(images/txt-name.gif) no-repeat top right;
}
.email {
    height:30px;
    background:url(images/txt-email.gif) no-repeat top right;
}
.website {
    height:30px;
    background:url(images/txt-website.gif) no-repeat top right;
}
.txt-email-sub {
    height:20px;
    background:url(images/txt-email-sub.gif) no-repeat 90px 0;
    clear:both;
}
.txt-website-example {
    height:20px;
    background:url(images/txt-site-example.gif) no-repeat 90px 0;
    clear:both;
}
#commentform {
    padding:0;
    margin:0;
}
#commentform .comment-field {
    border:1px solid #939393;
    width:320px;
    margin:0;
    padding:3px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;
    background:#fff;
    float:left;
}
#commentform .comment-box {
    border:1px solid #939393;
    width:425px;
    margin:0 0 10px;
    padding:3px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;
    background:#fff;
}
#commentform .btnComment {
    border:1px solid #fff;
    color:#fff;
    margin:0;
    padding:2px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:14px;
    background:url(images/btn-back.gif) transparent;
    float:left;
    clear:left;
}


/* comment list */

.commentlist {
    margin:20px 0;
    padding:0;
}
.commentlist li {
    padding:12px 0;
    background:url(images/line-inner.gif) no-repeat bottom;
    font-size:12px;
    line-height:20px;
    list-style:none;
}
.commentlist li a {
    color:#000;
    position:relative;
    text-decoration:none;
    border-bottom:1px solid #868585;
    background:#f4f0db;
}
.commentlist li a:hover {
    color:#000;
    text-decoration:none;
    border-bottom:1px solid #000;
    background:#fffbc1;
}
.commentdate {
    display:block;
    padding:0 0 6px;
    font-size:10px;
}
.commentlist li cite {
    font-weight:bold;
    font-style:normal;
}

Index

Code:

<?php get_header(); ?><style type="text/css">
<!--
body {
    background-image: url(images/background.png);
    background-repeat: repeat;
}
-->
</style>
<div id="container">
  <div id="search">
    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
      <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="txtField" />
      <input type="submit" id="searchsubmit" class="btnSearch" value="Find It &raquo;" />
    </form>
  </div>
  <div id="menu-holder"><?php include ('navigation.php'); ?></div>
  <div id="title">
    <h2><a href="<?php echo get_option('home'); ?>/"><?php bloginfo(PJK-Photography); ?></a></h2>
    <?php bloginfo('description'); ?></div>
</div>
<div id="content">
  <div class="col01">
  <?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
      <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
      <div class="post-inner">
        <div class="date-tab"><span class="month"><?php the_time('F') ?></span><span class="day"><?php the_time('j') ?></span></div>
        <div class="thumbnail"><?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?></div>
        <?php the_content('Read the rest of this entry &raquo;'); ?>
      </div>
      <div class="meta">posted under <?php the_category(', ') ?> |  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></div>
    </div>
    <?php endwhile; ?>
    <div class="post-nav"><span class="previous"><?php next_posts_link('&laquo; Older Entries') ?></span><span class="next"><?php previous_posts_link('Newer Entries &raquo;') ?></span></div>
    <?php else : ?>
    <div class="no-results">
<h3>Not Found</h3>
    <p>Sorry, but you are looking for something that isn't here.</p>
</div>
    <?php endif; ?>
  </div>
  <div class="col02">
    <div class="recent-posts">
    <?php
    query_posts('showposts=10');
    ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <ul>
    <li><a href="<?php the_permalink() ?>"><?php the_title() ?><br />
    <span class="listMeta"><?php the_time('g:i a') ?>, <?php the_time('F') ?> <?php the_time('j') ?>, <?php the_time('Y') ?></span></a></li>
    </ul>
    <?php endwhile; endif; ?>
    </div>
    <div class="postit-bottom"></div>
    <?php get_sidebar(); ?>
  </div>
  <br clear="all" />
</div>
<?php get_footer(); ?>

knowlesy · 7 Jun 2009 at 23:19

finally did it thanks guys ... there were a few spaces and spelling mistakes in the images when i had been messing on over time and so when i was trying msm772's way it wasnt working but then noticed my spelling mistakes etc thanks guys !!!!

if you want to give any more suggestions lol fire away

http://pjk-photography.co.uk/blog/

knowlesy · 8 Jun 2009 at 12:58

it was all fine and dandy but in my haste to get things done last night, i found a problem which i created 2 weeks ago on the about page and in trying to correct this i broke my blog..... so im working on a fix now... (i sorta deleted the location of it lol)

edit: corrected..... so basically what happend is i gave up and left the install page open and someone has gone in and reinstalled everything and created their own admin, THANKFULLY not done anything wrong to the site.... so far that i can tell so it should be ok and partially fixed the about page is still messed up but I'll fix that asap !

so if anyone knows jscolon .... (thats the user who logged in)

edit:

the about is now fixed