Elxis CMS Forum
Ελληνικό Forum => Πρόσθετα => Topic started by: m0st on April 25, 2013, 23:37:25
-
Καλησπέρα σας. Θέλω να θέσω μία εικόνα να πιάνει όλο το πλάτος της σελίδας. Πως γίνεται αυτό; ανεξαρτήτως πλαϊνών στηλών κλπ και να είναι κάτω από το top menu μου. Λογικά θα πρέπει να δημιουργήσω μία θέση module. Αυτό το έμαθα σε προηγούμενο post αλλά ποια θα είναι αυτή η θέση στον κώδικα (μιάς και είμαι άχρηστος). Επίσης πως γίνεται να ορίσω μία εικόνα σαν background της ιστοσελίδας μου;
Ευχαριστώ εκ των προτέρων.
-
Δεν χρειάζεται module γι αυτό. Αφορά το template σου από ότι κατάλαβα.
Με το CSS3 μπορείς εύκολα να βάλεις το width μίας εικόνας Background στο 100% του περιέκτη και η εικόνα θα τεντωθεί αυτόματα.
<div class="something">...</div>
.something {
background: url('image.png') 0 0 no-repeat;
background-size: 100% auto;
}
W3 schools για περισσότερα (http://www.w3schools.com/cssref/css3_pr_background-size.asp)
-
Γιάννη ευχαριστώ για την απάντηση.
Ερώτηση: Πρέπει να είναι Png η εικόνα που θα ορίσω ως background?
Και όσον αφορά την άλλη μου ερώτηση;Θέλω να θέσω μία εικόνα να πιάνει όλο το πλάτος της σελίδας. Πως γίνεται αυτό; ανεξαρτήτως πλαϊνών στηλών κλπ και να είναι κάτω από το top menu μου. Λογικά θα πρέπει να δημιουργήσω μία θέση module. Αυτό το έμαθα σε προηγούμενο post αλλά ποια θα είναι αυτή η θέση στον κώδικα (μιάς και είμαι άχρηστος).
-
Η επέκταση του αρχείου δεν έχει καμία σημασία. Στο Elxis προτιμούμε png γιατί είναι ανοικτό φορμάτ.
Αν η εικόνα είναι μεγάλη κάντη jpeg και png και επέλεξε αυτή με το καλύτερη αναλογία ποιότητας/μεγέθους.
Για να πιάσει μία εικόνα όλο το πλάτος του περίεκτη της βάλε width="100%"
<img src="..." alt="image" width="100%" />
Και λέω για περιέκτη καθώς οι τιμές επί τοις εκατό είναι σχετικές των διαστάσεων του "κουτιού" που βρισκόμαστε.
Παράδειγμα
<div style="display:inline-block; width:600px;">
<img src="..." alt="image" width="100%" />
</div>
Η παραπάνω εικόνα θα πάρει ως πλάτος το 100% του div που την περιέχει δηλαδή 600 pixels.