samyone 0 Report post Posted April 26, 2011 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 Share this post Link to post Share on other sites
ricardo 0 Report post Posted April 26, 2011 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 Share this post Link to post Share on other sites
samyone 0 Report post Posted April 26, 2011 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 Share this post Link to post Share on other sites
ricardo 0 Report post Posted April 26, 2011 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 Share this post Link to post Share on other sites
samyone 0 Report post Posted April 26, 2011 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 ! Share this post Link to post Share on other sites
ricardo 0 Report post Posted April 26, 2011 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 Share this post Link to post Share on other sites
samyone 0 Report post Posted April 26, 2011 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... Share this post Link to post Share on other sites
cmunns 16 Report post Posted April 27, 2011 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. Share this post Link to post Share on other sites
samyone 0 Report post Posted April 27, 2011 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 Share this post Link to post Share on other sites
catrina 103 Report post Posted April 27, 2011 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? Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
samyone 0 Report post Posted April 27, 2011 Sorry Catrina, I think it's fd-middle-sidebar.png. Share this post Link to post Share on other sites
kastelic 6 Report post Posted April 27, 2011 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; } Share this post Link to post Share on other sites
samyone 0 Report post Posted April 27, 2011 @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 Share this post Link to post Share on other sites
samyone 0 Report post Posted April 28, 2011 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 Share this post Link to post Share on other sites