CSS control background image does not scroll with scroll bar scrolling

Source: Internet
Author: User

These days are writing a demo, setting the background image,

Background:url (".. /images/bg.jpg ") repeat;

When using

$ (window). Scroll (function () { ....
});

When listening to scroll bar, normal operation under Google, the background image is not abnormal

In IE,Firefox scroll scroll bar, the background image flashed a flash, very uncomfortable.

Baidu: said the monitor needs to adjust the screen refresh frequency > Hz.

But my computer only 60Hz, then the problem comes, many small partners of the computer may be the same as mine, how to do? After looking through the multi-party, finally found such a property

Background-attachment Properties The original is said

Background correlation

If the document is long, the background image scrolls as the document scrolls down. The image disappears when the document scrolls beyond the location of the image.

You can prevent this scrolling by using the Background-attachment property. With this property, you can declare that the image is fixed in relation to the visible area (fixed) and therefore not affected by scrolling:

Body   {  background-image:url (/i/eg_bg_02.gif);  background-repeat:no-repeat;background-attachment:fixed}

The default value of the Background-attachment property is scroll, which means that, by default, the background scrolls with the document.

Find out why, and then you'll be happy, just set the background to

Background:url (".. /images/bg.jpg ") repeat fixed;

Say a digression, before learning CSS, must have learned this attribute, but did not mind, it seems to learn something or need to think more.

Then there is a question, why is it not a problem under Google?


CSS control background image does not scroll with scroll bar scrolling

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.