Jump to content
Sign in to follow this  
samyone

Custom multiple background in sidebar wrap

Recommended Posts

samyone

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

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

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

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

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

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

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

You are almost there: ` #sidebar-wrap { background: url( fd-top-sidebar.png) top left no-repeat, url( fd-bottom-sidebar.png) bottom left no-repeat, url( fd-middle-sidebar.png) 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

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
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

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

Share this post


Link to post
Share on other sites
kastelic

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

@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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×