Custom multiple background in sidebar wrap

[samyone 0]

Hi, I have somme problem to custom my sidebar with a background image. It was a multiple background image (top-middle-bottom) I use a CSS code, like this :

#sidebar-wrap #sidebar_base { background: url(http://www.ville-francois.fr/wordpress/wp-content/uploads/images/fd-top-sidebar.png) top left no-repeat, url(http://www.ville-francois.fr/wordpress/wp-content/uploads/images/fd-middle-sidebar.png) left repeat-y, url(http://www.ville-francois.fr/wordpress/wp-content/uploads/images/fd-bottom-sidebar.png) bottom left no-repeat; padding: 2em 10px 40px -10px; height:inherit; }

One problem is that I can see the bottom !! Someone can explain me why Here is the link :ville Fran?§ois

[ricardo 0]

Hi! CSS doesn't work like that. You can't have multiple background images, you can only have 1. What are you trying to do? Have a different background to the top, middle and bottom parts? Ricardo

[samyone 0]

Hi Ricardo, I have a background image with three part, and the background of the sidebar-wrap is the combination of this three part. Then when I place the different widget in this sidebar, my background must be stretchable.

• top-image : fd-top-sidebar.png
• middle-image : fd-middle-sidebar.png
• bottom-image : fd-bottom-sidebar.png

[ricardo 0]

I don't fully understand what you are trying to do but seems impossible. Let me see if I can shed some light there... Background images can't stretch. They can only repeat in one or both axis. You cannot use more than 1 image for any background. You can, however, use a different background for each widget so that it *appears* the sidebar has one large image but if I don't have the same font you use or I'm browsing with larger or smaller text, that effect breaks (horribly if I might add). Ricardo

[samyone 0]

Sorry for my bad english, I don't agree with you ricardo, it's possible with CSS3 you can have multiple backround. My first CSS code in the top of the message is something like that but when I used it, I can declare only two background So I obtain that : Ville Fran?§ois And the CSS code :

#sidebar-wrap { background: url(http://localhost/wordpress/wp-content/uploads/images/fd-top-sidebar.png) top left no-repeat, url(http://localhost/wordpress/wp-content/uploads/images/fd-bottom-sidebar.png) bottom left no-repeat; }
	#sidebar-wrap #sidebar_base { background: url(http://localhost/wordpress/wp-content/uploads/images/fd-middle-sidebar.png) top left repeat-y; }
	

I think there some margin or padding rules to take something great at finally !

[ricardo 0]

Samuel, Not sure how anyone can help you... You want to implement a feature only partially supported by 3 browsers, each with its own shortcomings. Why don't you use PNGs instead? Only a couple of versions of IE have problems with the transparency and there's a fix for that (or at least a way to degrade gracefully). Ricardo

[samyone 0]

I can't imagine doing 100 different sidebar backgroung image for each pages I have (one per page with different height) and the other I would have to do !! One solution exist ! No.... i was wrong...

[cmunns 16]

You are almost there: ` #sidebar-wrap { background: url( ) top left no-repeat, url( ) bottom left no-repeat, url( ) center left repeat-y; } ` Sort of works, but hard to tell until you stretch it all the way out with a widget and see how it handles the overlap.

[samyone 0]

Yep, Great Adam.. something like that...

• but the middle background image is over the bottom in the home page
• in Le Mot du Maire it delete the space between the navbar

Why when I look the code with Firebug in div#sidebar-wrap we found div#sidebar_base and div#sidebar1 ? Normal or not ? I desactivated sidebar1 in PageLines Section Control for each pages. The only one which display two sidebar was Actualit?©s and sidebar1 had the same background image but more little in width I know this site is something very specific !! but a great challenge

[catrina 103]

but the middle background image is over the bottom in the home page

What is the middle background image you're referring to? Can you please point out which one it is to avoid any confusion?

[samyone 0]

Sorry Catrina, I think it's fd-middle-sidebar.png.

[kastelic 6]

Add

content-box

to the bottom one and then add 20px of bottom margin like this:

#sidebar-wrap{
	padding-bottom: 20px;
	background-clip: padding-box, padding-box, content-box;
	}

[samyone 0]

@Adam & Jimmy, Thanks it's ok like that with property CSS3 background-clip

#sidebar-wrap { background: url(http://www.ville-francois.fr/wordpress/wp-content/uploads/images/fd-top-sidebar.png) top left no-repeat, url(http://www.ville-francois.fr/wordpress/wp-content/uploads/images/fd-bottom-sidebar.png) bottom left no-repeat, url(http://www.ville-francois.fr/wordpress/wp-content/uploads/images/fd-middle-sidebar.png) center left repeat-y; padding-bottom: 20px; background-clip: padding-box, padding-box, content-box; }

Ajust margin navbar/sidebar-wrap with

#sidebar-wrap { margin-top: 20px; }

Widget-title and the top of sidebar-wrap

#sidebar_base .widget-title { margin-top: 25px; }

Thanks a lot ! have a look : relief - Home

[samyone 0]

Ooupsss ! there was a problem when we use #sidebar-wrap. With one column display is ok, such with 2 columns (sidebar1 & sidebar2) the background image display both and I don't want background image in sidebar-wrap. So, 1 sidebar right (Base Sidebar) I used .one-sidebar-right #sidebar-wrap instead of #sidebar-wrap 2 sidebar right (Primary Sidebar and Secondary Sidebar) I used .two-sidebar-right #sidebar2