22 replies [Last post]
kaliman
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-03-13
Posts: 6
Points: 0

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 Laughing out loud

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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

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.

The next sentence is true. The previous sentence is false. Discuss...

kaliman
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-03-13
Posts: 6
Points: 0

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 Shock

[/b]

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Rezising Background image

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.

The next sentence is true. The previous sentence is false. Discuss...

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 9 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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

As Daybreak_0 mentions, you can rectify this easily. But, my whole solution is bit haphazard anyway and wouldn't really recommend it.

The next sentence is true. The previous sentence is false. Discuss...

kaliman
Offline
newbie
Last seen: 16 years 44 weeks ago
Joined: 2004-03-13
Posts: 6
Points: 0

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.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 36 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

tommuir
Offline
Regular
Upper east side
Last seen: 14 years 5 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

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.

i am not here

tommuir
Offline
Regular
Upper east side
Last seen: 14 years 5 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

Rezising Background image

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

i am not here

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Rezising Background image

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

http://nopeople.com/test/

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

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

tommuir
Offline
Regular
Upper east side
Last seen: 14 years 5 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

Rezising Background image

body {
margin:0;
padding:0;
}

problem solved.

i am not here

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

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

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 36 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

tommuir
Offline
Regular
Upper east side
Last seen: 14 years 5 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

Rezising Background image

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

i am not here

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Rezising Background image

Quote:
direction:rtl; [this reverses the entire site so the scrollbar is on the left]

tommuir
Offline
Regular
Upper east side
Last seen: 14 years 5 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

Rezising Background image

Ok, why?

i am not here

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

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.

tommuir
Offline
Regular
Upper east side
Last seen: 14 years 5 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

Rezising Background image

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

i am not here

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 36 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 1 day ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Rezising Background image

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

* html {overflow:hidden;}

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 4 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Rezising Background image

Quote:
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! Laughing out loud Laughing out loud Laughing out loud 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.