/    Sign up×
Community /Pin to ProfileBookmark

Two backgrounds on one WP-blog?

Copy linkTweet thisAlerts:
Dec 28.2008

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 [URL=”http://www.smashingmagazine.com/2008/08/20/notepad-chaos-a-free-wordpress-theme/”][I]Notepad Chaos[/I][/URL]. The header is a background [URL=”http://78.46.108.98/images/notepad-wordpress-theme/notepad-preview.jpg”]image[/URL] – 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;[/CODE]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLADec 29.2008 — The coding technique you've posted is not valid. Instead, you need to nest two divs, each containing its own background property.
Copy linkTweet thisAlerts:
@JickDec 30.2008 — In CSS3 two [I](or more)[/I] 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. ?
Copy linkTweet thisAlerts:
@Loi-BauthorJan 02.2009 — In CSS3 two [I](or more)[/I] 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. ?[/QUOTE]

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;[/CODE]

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;[/CODE]

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?
Copy linkTweet thisAlerts:
@JickJan 02.2009 — 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...
×

Success!

Help @Loi-B spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...