Rezising Background image

You could try something like this:

http://pub.c-o2.net/bg.htm

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.

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]

Not ideal, but easy enough:

http://pub.c-o2.net/bg.htm

I got rid of the div and let the image be 100% of the body.

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

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.

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.

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

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.

Why does it leave a 20px border along the right and bottom of the page!? :think: ](*,)

haha
Not working for me...
What am I doing wrong if it's so easy???

http://nopeople.com/test/

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

body {
margin:0;
padding:0;
}

problem solved.

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

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

direction:rtl; <-----what is this?

Ok, why?

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.

Yeah, the page seems to jump at 5px intervals :-k

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

To get rid of the double scroll bar in IE just add

* html {overflow:hidden;}

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.