CSS background-position ਵਿਸ਼ੇਸ਼ਤਾ
- ਪਿੰਡ ਪੰਨਾ background-origin
- ਅਗਲਾ ਪੰਨਾ background-position-x
ਡੀਫਾਈਨਿਸ਼ਨ ਅਤੇ ਵਰਤੋਂ
background-position ਪ੍ਰਤੀਭਾਗ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ਼ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਾਨ ਸੈਟ ਕਰਦਾ ਹੈ。
ਇਹ ਪ੍ਰਤੀਭਾਗ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ਼ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ (ਦੁਆਰਾ background-image ਡੀਫਾਈਨਿਸ਼ਨ) ਦੇ ਸਥਾਨ, ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ਼ ਜੇਕਰ ਕਿਸੇ ਤਰ੍ਹਾਂ ਵਿੱਚ ਕਿਸੇ ਨਾਲ ਕਿਸੇ ਨੂੰ ਦੋਹਰਾਉਣਾ ਹੈ ਤਾਂ ਇਸ ਪੁਨਿਕ ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇਗਾ。
ਸੁਝਾਅ:ਤੁਸੀਂ background-attachment ਲੈਗਜ਼ ਨੂੰ "fixedਜਾਂ ਤਾਂ ਇਹ ਲੈਗਜ਼ ਫਾਇਰਫਾਕਸ ਅਤੇ ਓਪਰਾ ਵਿੱਚ ਠੀਕ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰੇਗਾ。
ਹੋਰ ਦੇਖੋ:
CSS ਸਿੱਖਿਆ:CSS ਪਿੰਡਬੱਕਚ
CSS ਸੰਦਰਭ ਪੁਸਤਕ:background-image ਲੈਗਜ਼
HTML DOM ਸੰਦਰਭ ਪੁਸਤਕ:backgroundPosition ਲੈਗਜ਼
ਉਦਾਹਰਣ
ਕਿਵੇਂ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਹੈ:
body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
CSS ਗਰੇਫਿਕਸ
background-position: value;
ਲੈਗਜ਼ ਮੁੱਲ
| ਮੁੱਲ | ਵਰਣਨ |
|---|---|
|
ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਕੀਵਾਰਡ ਨਿਰਧਾਰਿਤ ਕਰੋ ਤਾਂ ਦੂਜਾ ਮੁੱਲ "center" ਹੋਵੇਗਾ。 ਮੂਲ ਮੁੱਲ: 0% 0%。 |
| x% y% |
ਪਹਿਲਾ ਮੁੱਲ ਹੰਗਾਮੀ ਸਥਾਨ ਹੈ ਅਤੇ ਦੂਜਾ ਮੁੱਲ ਸਥਾਨ ਹੈ。 ਉੱਚ ਪਿੱਛੇ ਹੈ 0% 0%। ਨਿਚਲੇ ਪਿੱਛੇ ਹੈ 100% 100%। ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ ਤਾਂ ਦੂਜਾ ਮੁੱਲ 50% ਹੋਵੇਗਾ。 |
| xpos ypos |
ਪਹਿਲਾ ਮੁੱਲ ਹੰਗਾਮੀ ਸਥਾਨ ਹੈ ਅਤੇ ਦੂਜਾ ਮੁੱਲ ਸਥਾਨ ਹੈ。 ਉੱਚ ਪਿੱਛੇ ਹੈ 0 0। ਇਕਾਈ ਪਿਕਸਲ (0px 0px) ਜਾਂ ਕਿਸੇ ਹੋਰ ਸੀਐੱਸਐੱਸ ਇਕਾਈ ਹੋਵੇਗੀ。 ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ ਤਾਂ ਦੂਜਾ ਮੁੱਲ 50% ਹੋਵੇਗਾ。 ਤੁਸੀਂ % ਅਤੇ position ਮੁੱਲਾਂ ਨੂੰ ਮਿਸ਼ਰਣ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ |
ਤਕਨੀਕੀ ਵੇਰਵੇ
| ਮੂਲ ਮੁੱਲ: | 0% 0% |
|---|---|
| ਵਾਲੀਸਿਟੀ: | no |
| ਸੰਸਕਰਣ: | CSS1 |
| ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸ: | object.style.backgroundPosition="center" |
ਹੋਰ ਉਦਾਹਰਣ
- ਕਿਵੇਂ % ਦੀ ਮਦਦ ਨਾਲ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ
- ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਸ਼ਤ ਦੀ ਮਦਦ ਨਾਲ ਪੇਜ ਉੱਤੇ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
- ਕਿਵੇਂ ਪਿਕਸਲ ਦੀ ਮਦਦ ਨਾਲ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ
- ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਪਿਕਸਲ ਦੀ ਮਦਦ ਨਾਲ ਪੇਜ ਉੱਤੇ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਦਾ ਸਥਾਨ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
ਸਾਰੇ ਪੁਲਾਂਚੀ ਸਬੰਧੀ ਨੰਬਰ ਵਿੱਚ ਪਹਿਲੀ ਵਰਜਨ ਨੂੰ ਜਾਣਕਾਰੀ ਦਿੱਤੀ ਗਈ ਹੈ ਜਿਸ ਵਿੱਚ ਇਹ ਲੈਗਜ਼ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਹੈ。
| ਚਰੋਮੇ | ਐਜ਼ਡ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|
| ਚਰੋਮੇ | IE / ਐਜ਼ਡ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- ਪਿੰਡ ਪੰਨਾ background-origin
- ਅਗਲਾ ਪੰਨਾ background-position-x
