Hi
This makes the background to be of fixed:
<style type="text/css">
body
{
background-image:
url("/images/smiley.gif");
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
the question is: Is it possible that the image gets resized with the browser?
I have a 800x600 bgd, but when it repeats it looks awfull :? , so I guess here someone Kkows a hack to make this happen
Rezising Background image
You could try something like this:
I don't think there's the facility to scale the background image of a CSS background declaration (someone may correct me though )
The solution I've done above is workable. Make the background a run-o-the-mill image. Give it percentage dimensions as so it scales, then, the content (although absolutely positioned, which I don't like), is placed on top.
The downside is, if it's an image not fit for scaling on the vertical or horizontal. Otherwise, javascript may have to be called in.
If anyone has a simpler solution, I'd be happy to learn.
Rezising Background image
Hi
I saw the page, and the idea goes weel, but the problem is that the background image should cover the 100% of the visible area of the browser. Thank you very much for replying. Moving towards CSS is quite difficult
[/b]
Rezising Background image
Not ideal, but easy enough:
I got rid of the div and let the image be 100% of the body.
Rezising Background image
There is no scaleable CSS solution to resizing the background. I have heard of some people using javascript, but not really successfully. Always a bit jerky.
Co2's solution is not bad, except IE6 always puts up its little image toolbar. and as most have IE....
BUT building on that solution -
Co2 When mouse is over your text then No toolbar. So create a large empty div over all of the image, then place the divc with text inside that new div.
Regards
Day
Rezising Background image
Oops, yes sorry... I regularly use Safari on OS X, so no image pop-up (I'm too lazy to swing round behind me and check on IE6 )
As Daybreak_0 mentions, you can rectify this easily. But, my whole solution is bit haphazard anyway and wouldn't really recommend it.
Rezising Background image
This is exactly what I meant at the beginning. I tested in different browsers (ie mozilla, firebird ) and had no problems.
Thank you so much for the help.
Rezising Background image
Don't make this harder than necessary. You can do this using the link posted above with the following CSS:
img#imgBg { position:absolute; top:0;left:0; width: 100%; height: 100%; z-index:1; } div#content { position: relative; z-index: 2; padding: 10px; width:auto;/*Or a percent if you wish*/ }
BTW - if you are worried about the IE img toolbar - just turn it off: <meta http-equiv="imagetoolbar" content="no" />
DE
Rezising Background image
Mmmmm. That code pretty much makes sense to me but I'm a javascripter and do little CSS. I was wondering, The "#"s, what do they mean and how would I implament the CSS within the HTML page? ie- how would I place Image/content. I got my BG image from a group of artists so I doubt they'll be too pleased if it gets cropped...
[edit] IDs right? So all I have to do is make an image with ID BGimg or somthing..cool.
Rezising Background image
Why does it leave a 20px border along the right and bottom of the page!? :think: ](*,)
Rezising Background image
haha
Not working for me...
What am I doing wrong if it's so easy???
Rezising Background image
Oh, I see...
I was trying to position the background from the body tag. I did not know I could assign an ID to the img tag.
This is VERY cool!!!
Thank you DCElliot!!!
now for those 20 px borders...
Rezising Background image
body {
margin:0;
padding:0;
}
problem solved.
Rezising Background image
Hmm, more problems.
I left for a bit, came back and it's broke! Not a clue why!
I've taken it apart and put it back together several times but I can't get the background to stay fixed.
What am I doing wrong now???
see it again at http://www.nopeople.com/test
Rezising Background image
OK - I've put up a page on my site that gives a couple of demos of this in action. Hope this helps. I'd be glad to answer any questions about this technique.
DE
Rezising Background image
direction:rtl; <-----what is this?
Rezising Background image
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
Rezising Background image
Ok, why?
Rezising Background image
Hmm, removing the direction tag puts the scroll bar back on the right again... but it's a double scroll bar now. The browsers regular one that's not working and the div windows' bar that is working.
Looks terrible.
It's also scrolling jerky for me when I use the mouse scrollwheel.
Rezising Background image
Yeah, the page seems to jump at 5px intervals :-k
Rezising Background image
You must be using Opera? I checked in Fiefox and IE6 and all was OK - Opera doesn't move the scrollbar for direction:rtl and seems to have body height issues as well (hence the double scroller).
Anyhow, aside from the fooling around with the scrollbar, does the code answer your earlier questions, Excavator?
DE
Rezising Background image
To get rid of the double scroll bar in IE just add
* html {overflow:hidden;}
Rezising Background image
Anyhow, aside from the fooling around with the scrollbar, does the code answer your earlier questions, Excavator?
It does DCElliot, and thanks again for the help!
I've been wanting to be able to do this with CSS for a couple years now but never figured it out. I had a page that did it with java but I never liked it.