ದೇಹದ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು ಸುಲಭವಾಗಿ ಮುಗಿದವು

ಎಚ್ಟಿಎಮ್ಎಲ್

ಅನೇಕ ಸೈಟ್‌ಗಳಲ್ಲಿ ನೀವು ಕಾಣುವ ಒಂದು ಉತ್ತಮ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ ಅಲ್ಲಿ ಕೇಂದ್ರ ವಿಷಯ ಪ್ರದೇಶವು ಪುಟವನ್ನು ಅದರ ಹಿಂದೆ ಡ್ರಾಪ್ ನೆರಳು ಹೊಂದಿರುವಂತೆ ಕಾಣುತ್ತದೆ. ಒಂದೇ ಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ ನಿಮ್ಮ ಬ್ಲಾಗ್ ಸುಂದರವಾಗಿ (ಅಥವಾ ಇತರ ವೆಬ್‌ಸೈಟ್) ಕಾಣುವಂತೆ ಮಾಡಲು ಇದು ಸಾಕಷ್ಟು ಸರಳ ವಿಧಾನವಾಗಿದೆ.

ಅದನ್ನು ಹೇಗೆ ಮಾಡಲಾಗುತ್ತದೆ?

  1. ನಿಮ್ಮ ವಿಷಯ ಎಷ್ಟು ವಿಸ್ತಾರವಾಗಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ. ಉದಾಹರಣೆ: 750 ಪಿಕ್ಸ್.
  2. ನಿಮ್ಮ ವಿವರಣಾ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಚಿತ್ರವನ್ನು ನಿರ್ಮಿಸಿ (ನಾನು ಇಲ್ಲಸ್ಟ್ರೇಟರ್ ಅನ್ನು ಬಳಸುತ್ತೇನೆ) ವಿಷಯ ಪ್ರದೇಶಕ್ಕಿಂತ ವಿಶಾಲವಾಗಿದೆ. ಉದಾಹರಣೆ: 800 ಪಿಕ್ಸ್.
  3. ಚಿತ್ರದ ಹಿನ್ನೆಲೆಯನ್ನು ನೀವು ಬ್ಲಾಗ್‌ನ ಪ್ರತಿಯೊಂದು ಬದಿಯಲ್ಲಿ ಹೊಂದಲು ಬಯಸುವ ಹಿನ್ನೆಲೆಗೆ ಹೊಂದಿಸಿ.
  4. ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಬಿಳಿ ಪ್ರದೇಶವನ್ನು ಸೇರಿಸಿ.
  5. ಪ್ರದೇಶದ ಎರಡೂ ಬದಿಯಿಂದ ಹೊರತೆಗೆಯುವ ಬಿಳಿ ಪ್ರದೇಶದ ಮೇಲೆ ನೆರಳು ಅನ್ವಯಿಸಿ.
  6. ಬೆಳೆ ಪ್ರದೇಶದ ಅಗಲವನ್ನು 1 ಪಿಕ್ಸೆಲ್ ಎತ್ತರಕ್ಕೆ ಹೊಂದಿಸಿ. ತ್ವರಿತ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಚಿತ್ರವನ್ನು ಉತ್ತಮವಾಗಿ ಮತ್ತು ಸಾಂದ್ರವಾಗಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಇದು ಮಾಡುತ್ತದೆ.
  7. ಚಿತ್ರವನ್ನು put ಟ್ಪುಟ್ ಮಾಡಿ.

ಇಲ್ಲಸ್ಟ್ರೇಟರ್ ಬಳಸಿ ನಾನು ಅದನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಿದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ (ನನ್ನಲ್ಲಿ ಬೆಳೆ ಪ್ರದೇಶವು ಹೆಚ್ಚು ಎತ್ತರವಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ… ಅದು ನಾನು ಏನು ಮಾಡುತ್ತಿದ್ದೇನೆ ಎಂದು ನೀವು ನೋಡಬಹುದು):
ಇಲ್ಲಸ್ಟ್ರೇಟರ್‌ನೊಂದಿಗೆ ಹಿನ್ನೆಲೆ

ಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ output ಟ್‌ಪುಟ್ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದಕ್ಕೆ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
ಹಿನ್ನೆಲೆ ಚಿತ್ರದ ಉದಾಹರಣೆ

ನಿಮ್ಮ ಬಾಡಿ ಸ್ಟೈಲ್ ಟ್ಯಾಗ್ ಬಳಸಿ ಚಿತ್ರವನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬೇಕು ಎಂಬುದು ಇಲ್ಲಿದೆ ಸಿಎಸ್ಎಸ್ ಫೈಲ್.

ಹಿನ್ನೆಲೆ: # B2B2B2 url ('images / bg.gif') ಪುನರಾವರ್ತಿತ-ವೈ ಕೇಂದ್ರ;

ಹಿನ್ನೆಲೆ ಶೈಲಿಯ ಟ್ಯಾಗ್‌ನ ection ೇದನ ಇಲ್ಲಿದೆ:

  • # ಬಿ 2 ಬಿ 2 ಬಿ 2 - ಪುಟದ ಒಟ್ಟಾರೆ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಹಿನ್ನೆಲೆ ಚಿತ್ರದ ಮೇಲೆ ಬೂದು ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಲು ಇದು ಬೂದು ಬಣ್ಣದ್ದಾಗಿದೆ.
  • url ('images / bg.gif') - ನೀವು ಬಳಸಲು ಬಯಸುವ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
  • ಪುನರಾವರ್ತನೆ-ವೈ - ಚಿತ್ರವನ್ನು ವೈ-ಅಕ್ಷದಲ್ಲಿ ಪುನರಾವರ್ತಿಸಲು ಹೊಂದಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ ಹಿನ್ನೆಲೆ ಚಿತ್ರವು ಪುಟದ ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಪುನರಾವರ್ತಿಸುತ್ತದೆ.
  • ಮಧ್ಯ - ಚಿತ್ರವನ್ನು ಪುಟದ ಮಧ್ಯದಲ್ಲಿ ಹೊಂದಿಸುತ್ತದೆ.

ಒಳ್ಳೆಯದು ಮತ್ತು ಸುಲಭ… ಒಂದು ಚಿತ್ರ, ಒಂದು ಶೈಲಿಯ ಟ್ಯಾಗ್!

2 ಪ್ರತಿಕ್ರಿಯೆಗಳು

  1. 1
  2. 2

ನೀವು ಏನು ಆಲೋಚಿಸುತ್ತೀರಿ ಏನು?

ಸ್ಪ್ಯಾಮ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಈ ಸೈಟ್ ಅಕಿಸ್ಸೆಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ನಿಮ್ಮ ಕಾಮೆಂಟ್ ಡೇಟಾವನ್ನು ಹೇಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ.