www.webdeveloper.com
Results 1 to 5 of 5

Thread: Two backgrounds on one WP-blog?

  1. #1
    Join Date
    Dec 2008
    Posts
    2

    Two backgrounds on one WP-blog?

    Hi there.

    I would like to know if it's possible to have two background images on one page on a WP-blog. I am new to css, but by googling I have found out, that it might be possible to solve my problem by using one background on the html part and one on the body part - but I don't know how to do that.
    The theme I'm trying to modify is called Notepad Chaos. The header is a background image - I have removed the swirls and the colour, put some shades on it and saved it as a .png (so that I can change the background when I want to). I would now like to have a wood background (use a wood pattern, repeat + fixed). Any ideas how to solve this?


    Here's the first part of the css:
    Code:
    body {
    	background:url(images/notpattern.png) repeat fixed #123123;
    	background:url(images/page-back.png) no-repeat top center #3f808a;

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    The coding technique you've posted is not valid. Instead, you need to nest two divs, each containing its own background property.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859
    In CSS3 two (or more) background images on one element is possible. But, since not all browsers support all of CSS3 yet that probably isn't too useful for you right now. Just something to keep in mind for the future though.

  4. #4
    Join Date
    Dec 2008
    Posts
    2

    Thumbs up

    Quote Originally Posted by Jick View Post
    In CSS3 two (or more) background images on one element is possible. But, since not all browsers support all of CSS3 yet that probably isn't too useful for you right now. Just something to keep in mind for the future though.
    Thanks a bunch, didn't know that!
    Now time to do some troubleshooting, my original style.css had this in it:
    Code:
    body {
    	background:url(images/page-back.png) no-repeat top center #dedede;
    	margin:0;
    Following the link provided about CSS3, I changed it to this:
    Code:
    body {
    	background:url(images/page-back.png) no-repeat top center #dedede,
        url(images/bg1.jpg) top left repeat;
    	margin:0;
    Somehow this messed it all up - it doesn't show the original background nor does it show the second one (tested in Safari 3.2.1). Is it enough to just change that one line in the style.css or is there another place where I should add the new background as well?

  5. #5
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859
    I'm actually not really sure why it wouldn't work... You're using a browser that should support it... So that must mean it is some sort of error in your code. I'm just not sure where. I'm not very knowledgeable with the new CSS3 stuff. I just know of it. Perhaps someone else can chime in here...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles