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 ?

tsinc80697 · 1 Jun 2009 at 21:56

yes

At the moment you have to use multiple DIVs. In the future with CSS3 you will be able to use multiple background-images on a single DIV which will be gooood!

Dj_Jestar · 1 Jun 2009 at 23:48

multiple elements with z-index

tsinc80697 · 2 Jun 2009 at 12:14

You don't have to use z-index if done properly, z-index can be an absolute nightmare and I stay far far away from it personally!

if you want DIV1's background behind DIV2's background then you would have

Code:

<div id="DIV1">
    <div id="DIV2">
    </div>
</div>

Dj_Jestar · 2 Jun 2009 at 12:42

I've never found z-index to be a nightmare, personally, but padding and margins are a nightmare, and can be problematic for positioning in your example

I usually prefer:

Code:

<div id="div1">foo</div>
<div id="div2">bar</div>

an example of layered backgrounds: http://www.pinesoft.co.uk/clients

tsinc80697 · 2 Jun 2009 at 17:01

Padding and Margins are standard practise in CSS. I don't know any developer that doesn't use them and I haven't come into a problem that I haven't been able to fix, mostly with a quick display:inline for IE6.

Dj_Jestar · 2 Jun 2009 at 17:10

a "quick display:inline" is a far cry from the solution with regards to IE6, and using nested div's where not necessary provides more problems with margins/padding; specifically with cross compatability; than just not having them nested.

gord · 2 Jun 2009 at 17:15

Dj_Jestar said:
a "quick display:inline" is a far cry from the solution with regards to IE6, and using nested div's where not necessary provides more problems with margins/padding; specifically with cross compatability; than just not having them nested.

Your HTML reads funny though. Looking at that HTML my mind is putting div 2 below div 1.

If I wanted to overlap content then the overlapping div would be nested in most cases, but I am sure there is a place for both markups.

Dj_Jestar · 2 Jun 2009 at 17:36

Would this help?

Code:

<div id="div1">foo</div><div id="div2">bar</div>

gord · 2 Jun 2009 at 20:27

Dj_Jestar said:
Would this help?

Code:

<div id="div1">foo</div><div id="div2">bar</div>

Cheeky beggar! No!

Still reads the same. Two boxes not overlapping.

tsinc80697 · 2 Jun 2009 at 20:34

How on earth would your example work? That would place 1 div after another? He wants one over the other in which case you need to have 1 div inside the other.

Dj_Jestar · 2 Jun 2009 at 23:36

er, simple really..

Code:

div#div1, div#div2 {
  height: 5em;
}
div#div2 {
  margin-top: -5em;
}

so no, you don't need one inside the other.

tsinc80697 · 3 Jun 2009 at 00:06

I'm not even going to bother! If you're happy with your code then great! I would never use a negative margin like that to shift something like that, never seen it before either in the sites I have worked on or looked at before.

Dj_Jestar · 3 Jun 2009 at 00:21

Then you've not worked on, nor seen very many sites..

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 ?

LiE · 4 Jun 2009 at 21:31

There's more than 1 way to skin a cat.

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(); ?>

LiE · 5 Jun 2009 at 08:35

Why are you setting the background-image for body twice, and in the index.php? Have you tried having background.png set as the body background and page-back.png set to the background of container?

nolimit · 6 Jun 2009 at 12:52

tsinc80697 said:
I would never use a negative margin like that to shift something like that

Even the CSS gurus approve negative margin. The most common use of negative margin is for Form Legend in IE.

tsinc80697 · 6 Jun 2009 at 16:03

Not saying don't use negative margins, just not in that sense