WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Positioning 2 backgrounds with CSS

Reply
  Thread Tools Display Modes
Old 7th January 12, 04:03 PM   #1
Ichirei
WLC Member
 
Join Date: Jan 2012
Posts: 3
Default Positioning 2 backgrounds with CSS

First of all, sorry my bad english; I'll try to explain as better as possible my problem.

I have a Wordpress site, so I can't change the HTML, but only the CSS, so keep in mind that I have restricted freedom.
What I need to do is to put 2 backgrounds, not just one as usually. I followed this guide: http://www.css3.info/preview/multiple-backgrounds and it works well, but I have problems with positioning each of them in a different place.

Is there a way to put a background image first with "background-position: center top" and then lets say 100 pixel to the left? I tried to use the "left" propriety, but I must insert those in the body class, so it doesn't move 100 pixel to the left just the background, but the entire body. I also tried to use the background-position in pixel and %, but then when I resize the browser window, the backgrounds move, and I don't want this.

Any idea please? If something isn't clear, just say it and I'll try to explain better. If you want to try something with firebug or this kind of thing, I'm sorry, but the site where I want to do this is not online.
Ichirei is offline   Reply With Quote
Old 7th January 12, 07:45 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Positioning 2 backgrounds with CSS

for each background image you have two positional values, x & y or horizontal and vertical, and each value group is separated by a comma. So for two images the position values would be;

background-position: x1 y1, x2 y2;

You can use the name values (constants) of left|center|right for the x axis, or top|center|bottom for the y axis.

so for your question;

background-position: center top, 100px top; would set the first image in the centre at the top of the element, with the second image also at the top but 100 pixels away from the left edge.

take note that the first image declared will be at the "top" of the stacking order with each following image below that.

Last edited by chrishirst; 7th January 12 at 08:20 PM.
chrishirst is offline   Reply With Quote
Old 7th January 12, 09:46 PM   #3
Ichirei
WLC Member
 
Join Date: Jan 2012
Posts: 3
Default Re: Positioning 2 backgrounds with CSS

Thank you for the answer, chrishirst.
I already tried before with pixels in background-positions, and now I tried again, but it's not what I want. If i put "100px top" it will stay 100px away from the left edge of the browser, so if I resize the browser window, the background image will go under the wordpress central content, and I just want it to remain where it is, so if I resize the browser I won't see anymore the image.

I'll show a couple of screenshots:
For now only one background image: http://img36.imageshack.us/img36/829...trazione1t.jpg I want it this way, to stay there. Now, if a resize the browser window I get this: http://img543.imageshack.us/img543/8...strazione2.jpg
Ichirei is offline   Reply With Quote
Old 8th January 12, 12:40 AM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Positioning 2 backgrounds with CSS

That's how backgrounds work, they are at the bottom of the stacking order, so go underneath higher elements.
chrishirst is offline   Reply With Quote
Old 8th January 12, 12:49 AM   #5
Ichirei
WLC Member
 
Join Date: Jan 2012
Posts: 3
Default Re: Positioning 2 backgrounds with CSS

Yeah, but if there is a way to set it something like 200 px left to the "center top", it will stay exactly where I want to even if I resize the window! I was thinking if is there a way to do this, "center top" but some pixels to a side...
Ichirei is offline   Reply With Quote
Old 8th January 12, 12:16 PM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Positioning 2 backgrounds with CSS

it has to be "center top" or not in the style rules and as there is no reliable DOM means to hook into the onResizeEnd method to recalculate the positions.

However you are trying to fix a "problem" that will exist for a very small minority of visitors. Of course the solution to this non-issue is astoundingly simple, as using a fixed with layout will simply stop it occuring.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:01 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.