ವೆಬ್ ಪುಟವನ್ನು ಹೊಂದಿಸಲು ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ವಿಸ್ತರಿಸುವುದು ಹೇಗೆ

ಹಿನ್ನೆಲೆ ಗ್ರಾಫಿಕ್ಸ್ನೊಂದಿಗೆ ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ ದೃಶ್ಯ ಆಸಕ್ತಿ ನೀಡಿ

ಚಿತ್ರಗಳು ಆಕರ್ಷಕ ವೆಬ್ಸೈಟ್ ವಿನ್ಯಾಸಗಳ ಒಂದು ಪ್ರಮುಖ ಭಾಗವಾಗಿದೆ. ಇದು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳ ಬಳಕೆಯನ್ನು ಒಳಗೊಂಡಿದೆ. ವಿಷಯ ಪುಟಗಳ ಭಾಗವಾಗಿ ನೀಡಲಾದ ಚಿತ್ರಗಳನ್ನು ವಿರೋಧಿಸುವ ಪುಟಗಳ ಪ್ರದೇಶಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಚಿತ್ರಗಳು ಮತ್ತು ಗ್ರಾಫಿಕ್ಸ್ ಇವು. ಈ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಒಂದು ಪುಟಕ್ಕೆ ದೃಷ್ಟಿಗೋಚರ ಆಸಕ್ತಿಯನ್ನು ಸೇರಿಸಬಹುದು ಮತ್ತು ನೀವು ಪುಟದಲ್ಲಿ ಹುಡುಕುವ ದೃಶ್ಯ ವಿನ್ಯಾಸವನ್ನು ಸಾಧಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು.

ನೀವು ಹಿನ್ನಲೆ ಚಿತ್ರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದರೆ, ಪುಟಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ನೀವು ಹಿಗ್ಗಿಸುವ ಚಿತ್ರಣವನ್ನು ನೀವು ನಿಸ್ಸಂದೇಹವಾಗಿ ಚಲಾಯಿಸಬಹುದು.

ಇದು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ವಿತರಿಸಲಾಗುವ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಸತ್ಯವಾಗಿದೆ.

ಹಿನ್ನಲೆ ಚಿತ್ರಣವನ್ನು ಹಿಗ್ಗಿಸುವ ಈ ಆಸೆಯು ವೆಬ್ ವಿನ್ಯಾಸಗಾರರಿಗೆ ಬಹಳ ಸಾಮಾನ್ಯ ಬಯಕೆಯಾಗಿದ್ದು, ಏಕೆಂದರೆ ಪ್ರತಿ ಚಿತ್ರವು ವೆಬ್ಸೈಟ್ನ ಜಾಗದಲ್ಲಿ ಸರಿಹೊಂದುವುದಿಲ್ಲ. ಸ್ಥಿರ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸುವ ಬದಲು, ಚಿತ್ರವನ್ನು ವಿಸ್ತರಿಸುವುದರಿಂದ ಬ್ರೌಸರ್ ಕಿಟಕಿಯು ಎಷ್ಟು ವಿಶಾಲ ಅಥವಾ ಸಂಕುಚಿತವಾಗಿದ್ದರೂ ಪುಟಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ಅದನ್ನು ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.

ಒಂದು ಪುಟದ ಹಿನ್ನಲೆಗೆ ಸರಿಹೊಂದುವಂತೆ ಚಿತ್ರವನ್ನು ವಿಸ್ತರಿಸುವ ಅತ್ಯುತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ಹಿನ್ನೆಲೆ-ಗಾತ್ರಕ್ಕಾಗಿ CSS3 ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವುದು. ಒಂದು ಪುಟದ ದೇಹಕ್ಕೆ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಒಂದು ಉದಾಹರಣೆಯಾಗಿದೆ ಮತ್ತು ಅದು ಗಾತ್ರವನ್ನು 100% ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ಇದರಿಂದ ಅದು ಯಾವಾಗಲೂ ಪರದೆಯ ಹೊಂದಿಕೊಳ್ಳಲು ವಿಸ್ತರಿಸುತ್ತದೆ.

ದೇಹ {
ಹಿನ್ನೆಲೆ: url (bgimage.jpg) ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ;
ಹಿನ್ನೆಲೆ-ಗಾತ್ರ: 100%;
}

Caniuse.com ಪ್ರಕಾರ, ಈ ಆಸ್ತಿ ಐಇ 9+, ಫೈರ್ಫಾಕ್ಸ್ 4 +, ಒಪೇರಾ 10.5+, ಸಫಾರಿ 5 +, ಕ್ರೋಮ್ 10.5+, ಮತ್ತು ಎಲ್ಲಾ ಪ್ರಮುಖ ಮೊಬೈಲ್ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇಂದು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಿಗೆ ಇದು ನಿಮ್ಮನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ, ಇದರರ್ಥ ನೀವು ಯಾರ ಪರದೆಯ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಎಂಬ ಭಯವಿಲ್ಲದೇ ಈ ಆಸ್ತಿಯನ್ನು ಬಳಸಬೇಕು.

ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ವಿಸ್ತರಿಸಿದ ಹಿನ್ನೆಲೆ ಹೊಂದಿದ್ದಾರೆ

IE9ಕ್ಕಿಂತ ಹಳೆಯದಾದ ಯಾವುದೇ ಬ್ರೌಸರ್ಗಳಿಗೆ ನೀವು ಬೆಂಬಲಿಸಬೇಕಾಗಿರುವುದು ತುಂಬಾ ಅಸಂಭವವಾಗಿದೆ, ಆದರೆ IE8 ಈ ಆಸ್ತಿಗೆ ಬೆಂಬಲ ನೀಡುವುದಿಲ್ಲ ಎಂದು ನೀವು ಕಳವಳ ವ್ಯಕ್ತಪಡಿಸುತ್ತೀರಿ. ಆ ಸಂದರ್ಭದಲ್ಲಿ, ನೀವು ವಿಸ್ತರಿಸಿದ ಹಿನ್ನೆಲೆ ನಕಲಿ ಮಾಡಬಹುದು. ಮತ್ತು ನೀವು ಫೈರ್ಫಾಕ್ಸ್ 3.6 (-moz-background-size) ಮತ್ತು ಒಪೇರಾ 10.0 (-ಒ-ಹಿನ್ನೆಲೆ-ಗಾತ್ರ) ಗಾಗಿ ಬ್ರೌಸರ್ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಬಳಸಬಹುದು.

ವಿಸ್ತರಿಸಿದ ಹಿನ್ನಲೆ ಚಿತ್ರವನ್ನು ನಕಲಿ ಮಾಡಲು ಸುಲಭವಾದ ಮಾರ್ಗವೆಂದರೆ ಅದು ಇಡೀ ಪುಟದಾದ್ಯಂತ ವಿಸ್ತರಿಸುವುದು. ನಂತರ ನೀವು ಹೆಚ್ಚಿನ ಸ್ಥಳಾವಕಾಶದೊಂದಿಗೆ ಅಂತ್ಯಗೊಳ್ಳುವುದಿಲ್ಲ ಅಥವಾ ನಿಮ್ಮ ಪಠ್ಯವು ವಿಸ್ತರಿಸಿದ ಪ್ರದೇಶದಲ್ಲಿ ಸರಿಹೊಂದುತ್ತದೆ ಎಂದು ಚಿಂತಿಸಬೇಕಾಗಿದೆ. ಅದನ್ನು ಹೇಗೆ ಮಾಡಬೇಕೆಂಬುದು ಇಲ್ಲಿದೆ:

id = "bg" />

1. ಮೊದಲಿಗೆ, ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು 100% ಎತ್ತರ, 0 ಅಂಚುಗಳು, ಮತ್ತು HTML BODY ಅಂಶಗಳಲ್ಲಿ 0 ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿವೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕೆಳಗಿನವುಗಳನ್ನು ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್ನ ತಲೆಯಲ್ಲಿ ಇರಿಸಿ:

2. ವೆಬ್ ಪುಟದ ಮೊದಲ ಅಂಶವಾಗಿ ನೀವು ಹಿನ್ನೆಲೆಯಂತೆ ಬಯಸುವ ಚಿತ್ರವನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಅದನ್ನು "bg" ನ ಐಡಿ ನೀಡಿ:

3. ಹಿನ್ನಲೆ ಚಿತ್ರವನ್ನು ಇರಿಸಿ ಇದರಿಂದಾಗಿ ಅದು ಮೇಲ್ಭಾಗದಲ್ಲಿ ಮತ್ತು ಎಡಕ್ಕೆ ಸ್ಥಿರವಾಗಿದೆ ಮತ್ತು 100% ಅಗಲ ಮತ್ತು 100% ಎತ್ತರದಲ್ಲಿದೆ. ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆಗೆ ಇದನ್ನು ಸೇರಿಸಿ:

   img # bg {
   ಸ್ಥಾನ: ಸ್ಥಿರ;
   ಅಗ್ರ: 0;
   ಎಡ: 0;
   ಅಗಲ: 100%;
   ಎತ್ತರ: 100%;
   }

4. "ವಿಷಯ" ದ ಐಡಿನೊಂದಿಗೆ DIV ಎಲಿಮೆಂಟ್ನ ಒಳಗೆ ನಿಮ್ಮ ಎಲ್ಲ ವಿಷಯವನ್ನು ಸೇರಿಸಿ. ಚಿತ್ರದ ಕೆಳಗೆ DIV ಸೇರಿಸಿ:

   ನಿಮ್ಮ ಎಲ್ಲಾ ವಿಷಯಗಳು - ಹೆಡರ್ಗಳು, ಪ್ಯಾರಾಗಳು, ಇತ್ಯಾದಿ ಸೇರಿದಂತೆ.

   ಗಮನಿಸಿ: ಇದೀಗ ನಿಮ್ಮ ಪುಟವನ್ನು ನೋಡಲು ಆಸಕ್ತಿಕರವಾಗಿದೆ. ಇಮೇಜ್ ವಿಸ್ತರಿಸಿದ ಔಟ್ ಪ್ರದರ್ಶಿಸಬೇಕು, ಆದರೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕಾಣೆಯಾಗಿದೆ. ಯಾಕೆ? ಏಕೆಂದರೆ ಹಿನ್ನಲೆ ಚಿತ್ರವು 100% ಎತ್ತರವಾಗಿದೆ, ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ನ ಹರಿವಿನ ನಂತರ ವಿಷಯ ವಿಭಜನೆಯು ಇರುತ್ತದೆ - ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳು ಅದನ್ನು ಪ್ರದರ್ಶಿಸುವುದಿಲ್ಲ.
   
5. ನಿಮ್ಮ ವಿಷಯವನ್ನು ಸ್ಥಾನಾಂತರಿಸುವುದು ಇದರಿಂದ ಅದು ಸಂಬಂಧಿತ ಮತ್ತು Z- ಸೂಚಿಯನ್ನು ಹೊಂದಿದೆ. ಇದು ಮಾನದಂಡಗಳು-ಕಂಪ್ಲೈಂಟ್ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಹಿನ್ನೆಲೆ ಇಮೇಜ್ಗಿಂತ ಹೆಚ್ಚಿನದನ್ನು ತರುತ್ತದೆ. ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆಗೆ ಇದನ್ನು ಸೇರಿಸಿ:

   #content {
   ಸ್ಥಾನ: ಸಂಬಂಧಿ;
   z- ಸೂಚ್ಯಂಕ: 1;
   }

1. ಆದರೆ ನೀವು ಮಾಡಲಿಲ್ಲ. ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 6 ಮಾನದಂಡಗಳಿಗೆ ಅನುಗುಣವಾಗಿಲ್ಲ ಮತ್ತು ಇನ್ನೂ ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿದೆ. ಪ್ರತಿ ಬ್ರೌಸರ್ನಿಂದ ಆದರೆ IE6 ಅನ್ನು ಮರೆಮಾಡಲು ಹಲವು ಮಾರ್ಗಗಳಿವೆ, ಆದರೆ ಸುಲಭವಾದ (ಮತ್ತು ಇತರ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುವ ಸಾಧ್ಯತೆಗಳು) ಷರತ್ತುಬದ್ಧ ಕಾಮೆಂಟ್ಗಳನ್ನು ಬಳಸುವುದು. ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ ಮುಖ್ಯಸ್ಥೆಯಲ್ಲಿನ ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ ನಂತರ ಕೆಳಗಿನವುಗಳನ್ನು ಇರಿಸಿ:

2. ಹೈಲೈಟ್ ಮಾಡಲಾದ ಕಾಮೆಂಟ್ನಲ್ಲಿ, ಐಇ 6 ಅನ್ನು ಸಂತೋಷವನ್ನು ಪಡೆಯಲು ಕೆಲವು ಶೈಲಿಗಳೊಂದಿಗೆ ಮತ್ತೊಂದು ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ಸೇರಿಸಿ:

3. ಐಇ 7 ಮತ್ತು ಐಇ 8 ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ. ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸಲು ನೀವು ಕಾಮೆಂಟ್ಗಳನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. ಆದರೆ, ನಾನು ಅದನ್ನು ಪರೀಕ್ಷಿಸಿದಾಗ ಅದು ಕೆಲಸ ಮಾಡಿದೆ.

ಸರಿ - ಇದು ಒಪ್ಪಿಕೊಳ್ಳಬಹುದಾಗಿದೆ WAY ಅತಿಕೊಲ್ಲುವಿಕೆ. ಕೆಲವೇ ಕೆಲವು ಸೈಟ್ಗಳು ಇಇ 7 ಅಥವಾ 8 ಅನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ, ಕಡಿಮೆ IE6!

ಹಾಗೆಯೇ, ಈ ವಿಧಾನವು ಹಳೆಯದು ಮತ್ತು ನಿಮಗೆ ಅನಗತ್ಯವಾಗಿರಬಹುದು. ನಮ್ಮ ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು ಅಷ್ಟೊಂದು ಚೆನ್ನಾಗಿ ಒಟ್ಟಿಗೆ ಆಡುವ ಮೊದಲು ಎಷ್ಟು ಕಷ್ಟಕರವಾದ ವಿಷಯಗಳ ಬಗ್ಗೆ ಕುತೂಹಲಕಾರಿ ಮಾದರಿಯಂತೆ ನಾನು ಅದನ್ನು ಇಲ್ಲಿ ಬಿಡುತ್ತೇನೆ!

ಸಣ್ಣ ಬಾಹ್ಯಾಕಾಶದ ಮೇಲೆ ವಿಸ್ತರಿಸಿದ ಹಿನ್ನಲೆ ಚಿತ್ರವನ್ನು ಪಡೆಯಲಾಗುತ್ತಿದೆ

ನೀವು DIV ಯ ಉದ್ದಕ್ಕೂ ನಕಲಿ ಹಿನ್ನಲೆ ಚಿತ್ರಕ್ಕೆ ಅಥವಾ ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ಮತ್ತೊಂದು ಅಂಶಕ್ಕೆ ಇದೇ ತಂತ್ರವನ್ನು ಬಳಸಬಹುದು. ನೀವು ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸಬೇಕಾದರೆ ಅಥವಾ ನಿಮ್ಮ ಪುಟದ ಇತರ ಭಾಗಗಳಿಗೆ ವಿಚಿತ್ರ ಅಂತರದ ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿರುವುದರಿಂದ ಇದು ಸ್ವಲ್ಪ ಮನೋಭಾವವಾಗಿರುತ್ತದೆ.

1. ನಾನು ಹಿನ್ನೆಲೆಯಾಗಿ ಬಳಸಲು ಬಯಸುವ ಪುಟದಲ್ಲಿ ಚಿತ್ರವನ್ನು ಇರಿಸಿ.

2. ಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ, ಚಿತ್ರಕ್ಕಾಗಿ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ. ಗಮನಿಸಿ, ನೀವು ಅಗಲ ಅಥವಾ ಎತ್ತರಕ್ಕಾಗಿ ಶೇಕಡಾಗಳನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ಎತ್ತರಕ್ಕಾಗಿ ಉದ್ದದ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಸರಿಹೊಂದಿಸಲು ನಾನು ಸುಲಭವಾಗುತ್ತದೆ.

   img # bg {
   ಅಗಲ: 20 ಎಮ್;
   ಎತ್ತರ: 30 ಎಮ್;
   }

3. ನಾವು ಮೇಲಿನಂತೆ ಮಾಡಿದಂತೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ಐಡಿ "ವಿಷಯ" ದೊಂದಿಗೆ DIV ಯಲ್ಲಿ ಇರಿಸಿ:

   ನಿಮ್ಮ ಎಲ್ಲ ವಿಷಯಗಳು ಇಲ್ಲಿವೆ

4. ವಿಷಯದ DIV ಹಿನ್ನೆಲೆ ಇಮೇಜ್ನಂತೆ ಒಂದೇ ಅಗಲ ಮತ್ತು ಎತ್ತರ ಎಂದು ಶೈಲಿ:

   div # content {
   ಅಗಲ: 20 ಎಮ್;
   ಎತ್ತರ: 30 ಎಮ್;
   }

5. ನಂತರ ಚಿತ್ರವನ್ನು ಅದೇ ಎತ್ತರಕ್ಕೆ ವಿಷಯ ಸ್ಥಾನ. ನಿಮ್ಮ ಇಮೇಜ್ 30em ಆಗಿದ್ದರೆ ನೀವು ಉನ್ನತ ಶೈಲಿಯನ್ನು ಹೊಂದಿದ್ದೀರಿ: -30 ಎಮ್; ವಿಷಯದ 1 ಒಂದು z- ಸೂಚಿಯನ್ನು ಹಾಕಲು ಮರೆಯಬೇಡಿ.

   #content {
   ಸ್ಥಾನ: ಸಂಬಂಧಿ;
   ಉನ್ನತ: -30 ಎಮ್;
   z- ಸೂಚ್ಯಂಕ: 1;
   ಅಗಲ: 20 ಎಮ್;
   ಎತ್ತರ: 30 ಎಮ್;
   }

6. ನಂತರ ನೀವು ಮೇಲೆ ಮಾಡಿದಂತೆ ಐಇ 6 ಬಳಕೆದಾರರಿಗೆ -1 ರ ಝಡ್-ಇಂಡೆಕ್ಸ್ನಲ್ಲಿ ಸೇರಿಸಿ:

ಮತ್ತೊಮ್ಮೆ, ವಿಶಾಲ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಈಗ ಹಿಡಿದಿರುವ ಹಿನ್ನೆಲೆ-ಗಾತ್ರದ ಜೊತೆ, ಈ ವಿಧಾನವು ಅನಗತ್ಯವಾಗಿ ಮತ್ತು ಹಿಂದಿನ ಕಾಲದ ಉತ್ಪನ್ನವಾಗಿ ಪ್ರಸ್ತುತಪಡಿಸಲ್ಪಡುತ್ತದೆ. ನೀವು ಈ ವಿಧಾನವನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ, ನೀವು ಸಾಧ್ಯವಾದಷ್ಟು ಬ್ರೌಸರ್ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ.

ಮತ್ತು ನಿಮ್ಮ ವಿಷಯವು ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ನಿಮ್ಮ ಕಂಟೇನರ್ ಮತ್ತು ಹಿನ್ನೆಲೆ ಚಿತ್ರದ ಗಾತ್ರವನ್ನು ನೀವು ಬದಲಾಯಿಸಬೇಕಾಗಿದೆ, ಇಲ್ಲದಿದ್ದರೆ, ನೀವು ವಿಚಿತ್ರ ಫಲಿತಾಂಶಗಳೊಂದಿಗೆ ಅಂತ್ಯಗೊಳ್ಳುತ್ತೀರಿ.