[SOLVED] About "background-image: fixed;" Scrolling Issues

[doctypedeclaration]

Consider the following CSS:

Code: Select all

html, body  {
    font-family: verdana, arial, helvetica;
    font-size: 11px;
    color: #B38446;
    background-color: #000000;
    background-image: url('images/background.gif');
    background-position: 0% 0%;
    background-attachment: fixed;
}

I have found in both FireFox and IE that although the background is fixed to the specified position, the scrolling is extremely choppy.

I have also searched and searched and searched for a solution to this problem. If I take out the fixed command, the scrolling is perfect.

How can I use the background-attachment: fixed command and maintain perfect, or at least smoother scrolling?

[doctypedeclaration]

Aww. Someone must have some light to shed on this.

Ok, the problem is that I want to position my background image with the variables of "0% 0%" but the "background-position" command only works together with the "background-attachment :fixed;" command.

I don't mind having a scrolling background if I can use the position command.

That said can anyone advise then how to either:

a. Use the "background-attachment: fixed;" command and maintain perfect, or at least smoother scrolling

or

b. Use the position command without "background-attachment: fixed;"

Many thanks for any helpful responses.

[Aso]

Firstly I should clarify background-position does work, even without a fixed attachment.

However, you are correct in saying that it does not have the same effect as background-attachment: fixed.

background-position will set the position of the background in relation to the size of the browser viewport at load, but will then scroll with the content (if it overflows the viewport size).

As to your problem, I very much doubt there is anything you can do with regards to 'chopiness.' CSS won't be the only issue; system hardware (particularly graphic cards) play a major role in the 'smoothness' of internet browsing.

Have you got a link to a demo, so other users can test out the scenario?

[doctypedeclaration]

Interesting.

If you reconsider the original CSS code I provided in my first post; well, if I remove the background-attachment: fixed; command it no longer positions to the 0% 0% co-ordinates but instead positions itself around the main table content, and then badly tiles the excess/exterior of the page at different co-ordinates. Resulting in an additional superfluous background tile.

I'm currently editing it offline so can't show you a working page. Everything works fine, it's just what happens if I remove the fixed command.

[doctypedeclaration]

According to w3schools Firefox doesn't support the positition command without fixed, but it appears for me that neither does IE.

[Aso]

If you don't specify a backround-repeat, then you won't see the effect of background-position as the browser will tile the image everywhere!

EDIT: Firefox most definitely supports background-position.

[doctypedeclaration]

Oh I see. I'll add in the repeat command and see what happens.

Here's the link to what w3schools said:

http://www.w3schools.com/css/pr_background-position.asp

Thanks for your advice.

[Aso]

I believe W3 Schools are referring to the original Mozilla browser. Either way, I can assure you background-position works in Firefox

[doctypedeclaration]

I've added the repeat command:

Code: Select all

html, body  {
    font-family: verdana, arial, helvetica;
    font-size: 11px;
    color: #B38446;
    background-color: #000000;
    background-image: url('images/background.gif');
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
}

However, it still does not work unless I specify the background-attachment: fixed; command.

[doctypedeclaration]

Ah, splitting the html assignments from the body assignments solved my solution.

Code: Select all

html    {
    background-color: #000000;
    background-image: url('images/background.gif');
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
}

body  {
    font-family: verdana, arial, helvetica;
    font-size: 11px;
    color: #B38446;
}

Thanks for your time.