Αλλαγή Css background αναλόγως του άρθρου.

**vagelis199** Παρ Μαρ 25, 2016 6:06 pm

Θα σας δειξω πως μπορείτε να προσαρμόσετε το background της ιστοσελίδας σας ανάλογα με την ετικέτα του άρθρου σας,Δηλαδή όταν ανοιγετε ένα άρθρο με την ανάλογη ετικέτα το background της ιστοσελίδας προσαρμόζεται με το θέμα του άρθρου και γενικά μπορείτε να προσαρμόσετε ότι θέλετε σχετικα με το Css η ακόμη και το html. Εγώ αυτόν τον κωδικό τον έφτιαξα ιδικά για το gretaku.com όποτε θα πρέπει να τον προσαρμόσετε ανάλογα για την δικιά σας ιστοσελίδα. Για να το καταφέρετε αυτό χρειαζετε να εχετε ενσωμάτωση το Jquery στην σελίδα σας, αυτό είναι απλό παίρνετε τον παρακάτω κώδικα και τον βάζετε στο head της ιστοσελίδας σας

Κώδικας:: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Επειτα ξεκινάμε εγω αυτο που εφάρμοσα είναι η αλλαγη του background από το body αλλα αυτο που δεν μου αρεσε ειναι πως μπανει καπος αποτομα το background όποτε ειπα μιας και εχω το Jquery στα χέρια μου ας βάλω ενα εφε, Fade δηλαδή να εμφανίζεται σιγά. Φισικα μπορειτε να πατε απεθιας αλλαζοντας το css του body αλλα εγω εδω θα σας διξω τον τροπο με το εφε. Να εμφανισω ενα background στο body με εφφε δεν γίνετε, ο τροπος για να πετύχω αυτο ειναι να φτιαξω ενα ξεχωριστώ Div στο οπιο θα εφαρμόσω το fade εφε με την φόρτωση της σελίδας φυσικά το div θα ειναι εξαρχεις φορτωμένο με το background και θα βρίσκεται σε display:none μορφή το div το φτιάχνουμε αμεσα μετα την ετικετα body διλαδι θα ειναι κάπως ετσι

Κώδικας:: <body> <div id="bodybackground"></div>

επειτα στο css μας βαζουμε τα εξεις

Κώδικας:: #bodybackground{ display:none; position:fixed; height: 100%; width:100%; background-repeat: no-repeat; background-size:cover; }

Εξηγηση: ο λογος που το βαζουμε ως display:none ειναι επιδι θελουμε να μην ειναι εμφανες εξαρχεις και να εμφανιζετε με εφε που θα βαλουμε οταν ο κοδικος αναγνοριζει την ετικετα του αρθρου μας.
το position ειναι fixed οστε το div να ειναι πίσω απολα και να ακολουθη το scrolling. το width και το height ειναι 100% για να πιανει ολοι την σελιδα και το background-repeat σε no-repeat για να μην σινεχιζει το background μιας και θα το εχουμε το μεγεθος του ως cover διλαδι να πιανει ολο το div ασχετος το μεγεθος του.

επιτα παμε στο τελος του body διλαδι στο

Κώδικας:: εδω</body>

και ανιγουμε μια ετικετα script εδω θα βαλουμε τον javascript κώδικα μας, ο λογος που το βαζουμε στο τελος του body ειναι επιδι θελουμε να τρεχει ο κοδικος εφοσος το ικαστικο κοματι της σελιδας εχει φορτοση, ξεκιναμε με το jquery εχονας γνοση που βρισκετε το κιμενο της ετικετας που ψαχνουμε εγω το εχω στο .post-labels βαζουμε καταλιλα.

Κώδικας:: <script> $('.post-labels:contains("Pokémon")').each(function () { $('#bodybackground').css('background-image','url(https://lh3.googleusercontent.com/-4ikeJ2N4_EM/VvQCCcW-zOI/AAAAAAAAHuQ/cYd56rarm7YpFQo6QKT0qAdP79VuEPV_QCCo/s2048-Ic42/pokemongobackground.jpg)'); $(window).load(function(){ $("#google-ad").css("border-bottom","0px"); $( "#bodybackground" ).fadeIn( "slow"); }); }); </script>