Hello,
I want to add some static images on background but I don’t know how to do this.
The main background it’s a tilled pattern, but over the whole background I want some images which scrolls.
Thanks in advance.
It depends where you are. My UK-based site has only about 5% of hits from IE6 and below these days, although I accept that in some areas and some target audiences that figure would be higher.
However - this is one of those situations where it probably is OK for IE6 not to get the same treatment. If everything lines up right in IE6, nobody will know if some parts of the background are scrolling when they shouldn’t, or not scrolling when they should. People who use IE6 (for browsing, as opposed to for testing) are not going to compare it with Firefox and Opera to see if they get the same output, they’ll just go with what they’re given. As long as it doesn’t look like it’s going wrong, it will be fine!
Ah see, that’s the thing, the shadows done that way mean alpha transparency, and I won’t use those on the grounds that not only are they a pain in the ass to make work in legacy IE, the filesizes usually end up nuts.
Though… you’re saying the TILED isn’t supposed to scroll and the girl is? You say “same like in your link” but in my link she’s NOT scrolling – well, unless you are looking at it in IE6/earlier.
“separate shadow is for body” – you mean the content column, right? Putting that on ‘body’ wouldn’t work. I think I’m having a lot of terminology issues with what you are saying as it feels like every other post you are contradicting the previous one. Can I assume English is not your primary language?
Oh, and still care about IE6, it’s 20-30% of the browsing public and is usually people who either are forced to use it due to financial reasons/work, or people who don’t understand why they should have to change from a browser that worked fine for them for almost a decade.
…and even if it was just 10%, that would be 10% of 2.1 billion.
At last, we start to understand each other.
The grey tilled pattern is static, not scrolling, just set it to repeat.
The separate shadow is for body (forget about this shadow for the moment).
The girl shadow is in the same file with the girl, it’s one .png file for the girl with her shadow together.
Yes, the girl is supposed to scroll, same like in your link.
I don’t care about IE5 or 6, these versions are too old and not so many people use them in those days.
I want something similar like in your link, but don’t get it to work by your first mentioned method.
Well, I can be more specific than this. I try to explain again, and if it’s not understood, then I’ll give up.
This is the result of basic method to add a background image, a tilled pattern set to repeat.
Then by using this code:
body {
background-image: url(images/Bgsh.png), url(images/girl1.png), url(images/Bckgr2.png);
background-position: center, top right, center center;
background-repeat: repeat-y, no-repeat, repeat;
background-attachment: fixed, scroll, fixed;
}
I added 2 another images over the first background.
One of the images is the girl, and the other one is the shadow for page.
This is the result:
I could use this method, because this is what I want, but since not all browsers allow CSS3 I have to find a different method.
Now, by using your recommendation, I added,
<div id="pageWrapper"></div>
inside of header.php file and
html, body {
width:100%;
height:100%;
overflow:hidden;
position:relative; /* make opera behave on redraw */
background:url(images/Bckgr2.png) 0 0 repeat;
}
#pageWrapper {
height:100%;
overflow:auto;
background:url(images/girl1.png) 0 0 no-repeat;
}
inside of style.css file.
The result is the same as the first one:
The only difference is that now the page is stucked and does not scroll anymore.
… and people don’t visit websites for the graphics you have on the content; they visit for the content.
I do not agree,… then we shall all use old html style with basic buttons with a black text over a red square and we shall concentrate only to the content.
Sometimes the design it’s a part of the content.
If my problem can not be solved, then, tha’s it… thank you all for your kind replies.
Actually, you’ve just given me more questions 
I think you are using as separate images stuff I’d be using single images for… but I’m not sure. I’m not clear on which images are which here — are you saying the shadow is SEPARATE? Is this a fluid width layout? What images are scrolling and which ones are not? (I’m STILL not clear on that)
I thought your two images were the stripes and the girl – are you now saying the shadow is a third image? (IF so that’s alpha .png, something I don’t do on websites).
IF it’s fixed width (which I hate doing) and the girl is not moving, then it’s semi-viable to implement, though for IE6/earlier the girl will scroll.
http://www.cutcodedown.com/for_others/moschino/template.html
Is where I’m at with it. Works in IE7 and anything newer as you’d expect, but ends up fixed width (BOO!)… In IE6 and 5.5 it also shows the girl, but she scrolls on those browsers – close enough for government work and better than having NO backgrounds load in any version of IE that’s in the wild like the CSS3 multi-backgrounds end up doing.
The other technique I was suggesting would indeed fix her position in legacy IE too, but she’d depth sort over the scrollbar on all browsers when the screen got narrow, and you can’t line up the background with the foreground thanks to the scrollbar.
Trying to implement that here, where the tiled background scrolls but the girl does not – problems galore. Since ‘center’ is screwed up by the scroll bar, the girl would depth sort OVER the scroll bar, etc, etc…
This treads into the ‘non-viable design concept’ territory in my book. I’d consider ditching the idea alltogether; that or I’d say “oh well” and have the tiled background not scroll either. The code for anything else ends up needlessly complex for a minor graphical element.
… and people don’t visit websites for the graphics you have on the content; they visit for the content.
Can you post the two images you want to overlay? (imageshack or some such so we don’t have to wait on the moderators)
My code example SHOULD be identical in behavior to the CSS3 you posted… So I’m not sure what the problem would be (Still waiting for the attachment to be approved.) If I had the images in question I could probably give you a real working example of it.
Ok, is background 2 supposed to scroll, or not supposed to scroll? The code you presented it should have scrolled while the tiled background stayed in place, which is what I coded. If it’s not supposed to scroll, then you just place it as another div OUTSIDE #pageWrapper.
Though really with that placement it’s going to be a stone cold PITA cross-browser given what that’s going to do for width constraints. Very typical of the ‘but I can do it in photoshop’ design mentality – basically something I wouldn’t even be trying to do on a website in the first place as a waste of bandwidth (image that size, yikes), technologies NOT worth attempting on websites (alpha transparency), etc, etc.
It can be done, it’s just got a lot of problems that make one ask WHY you’d want to do it. When I’m back at my workstation (on the road right now) I’ll take a stab at making a working example of that.
– EDIT – WAIT… did you want the TILED to scroll and not the foreground image? I’m confused, you had one scrolling and one not; which was which? This is why I never call anything by a vague name like “background1” and “background2” as I can NEVER keep them straight.
No, by using your method the background works as body/page background.
I don’t want a background for text, for content, etc… I want a background for everything is inside the browser.
I attached another image to see where it was added by using this method.(green arrow)
I can’t give any link because I’m testing this on a localhost, but you should understand.
As far as I see all around, excepting the css3 method, there’s no other method.
I searched all around the internet and everyone tells about div method, but this does not add a website multiple backgrounds.
If I am doing something wrong, then please explain a bit more what should I do.
Thank you.
Multiple backgrounds like that is CSS3; Since CSS3 is not even out of DRAFT you shouldn’t even be trying to use that approach if you are making a production website.
If I understand what you are trying to do, I’d approach it thus:
html, body {
width:100%;
height:100%;
overflow:hidden;
position:relative; /* make opera behave on redraw */
background:url(images/fixed.png) 0 0 repeat;
}
#pageWrapper {
height:100%;
overflow:auto;
background:url(images/scroll.png) 0 0 no-repeat;
}
DIV#pageWrapper going around your entire page content.
Basically to emulate fixed we turn off overflow on body (and html for IE), then create a full screen size div with overflow:auto. Anything on body (and anything absolute positioned outside #pageWrapper) will behave as position:fixed, while anything on DIV#pageWrapper will behave normally (scroll).
… and that should work all the way back to IE 5.2/5.5 flawlessly right up to the latest flavors of every browser.
The images were aproved, next time I will use photobucket to not have to wait.
Well, I hope now I’m more specific and you can understand what I mean.
I attached an image to know what I want.
Website is the body/page/etc…
Background1 is a tilled pattern, and Background2 is a .png image over the Background1. So there are 2 Background images.
To obtain this I used this CSS:
body {
background-image: url(images/1.png), url(images/2.png);
background-position: top right, left;
background-repeat: no-repeat, repeat;
background-attachment: scroll, fixed;
}
I am satisfied with the result, actually this is what I want but as I have read on other topics the problem is that not all browsers accept this code and on some browsers the background is completely blank.
In Chrome, Opera and Safari looks as you can see in the picture but on Firefox, Seamonkey and IE the background is completely white.
Any method to fix this for other browsers, or another method which works on any browser?
The reason that a lot of browsers don’t give the right results is that you’re only allowed to use one background image on each element. Multiple background images is a feature of CSS3, but that is not yet a standard, and its features are not generally supported yet. It doesn’t appear to be on the list for IE9, so it will be a long time before you can use it and expect it to work.
The way to get around it is to set the tiled pattern as a background on body, and then put a div inside the body, surrounding all content, and set the second image as the background to that one.
I heard about this method, but by adding a div inside of body deformed the page structure. I mean, the background image of the div was placed inside of website page and not in the background.
My page width its 1200px, and that div should be outside of these parameters.
I guess http://www.thesimsresource.com/ here is used the div method.
Can you give me some examples of codes to add a div and to work like in the website mentioned?
Thank you.
just add a background to another html element, for example another div?
sorry, without more information, for example a link to your current site or at least your code, it’s difficult to actually help you.