Βασικές ιδιότητες φόντου στη CSS

Οι βασικές ιδιότητες φόντου στη CSS χρησιμοποιούνται για να ορίσουμε χρώμα ή μια εικόνα για το φόντο της ιστοσελίδας μας και να ορίσουμε λεπτομέρειες για τη θέση του.

Οι βασικές ιδιότητες φόντου στη CSS είναι οι εξής:

background-color
background-image
background-position
background-repeat
background-attachment

Background-color

Με την ιδιότητα background-color (χρώμα φόντου) ορίζουμε ένα χρώμα ως φόντο ενός στοιχείου.

Στο παρακάτω παράδειγμα θα χρησιμοποιήσουμε και τους τρεις τρόπους για να ορίσουμε χρώμα.

Παράδειγμα

body{
  background-color: lightblue;
}
h1{
  background-color: rgb(128, 128, 128); /* γκρι */
}
div{
  background-color: #FFFF00 /* κίτρινο */
}

Background-image

Με την ιδιότητα background-image (εικόνα φόντου) ορίζουμε μία εικόνα ως φόντο ενός στοιχείου. Από προεπιλογή η εικόνα επαναλαμβάνεται μέχρι να καλύψει το στοιχείο, στο οποίο την έχουμε ορίσει.

Παράδειγμα

body{
  background-image: url("myimage.jpg");
}

Background-position

Με την ιδιότητα background-position (θέση φόντου) ορίζουμε τη θέση που θέλουμε να έχει το φόντο ενός στοιχείου χρησιμοποιώντας τις λέξεις κλειδιά center, top, bottom, left, right. Χρησιμοποιούμε δύο λέξεις, η πρώτη ορίζει την κάθετη θέση και η δεύτερη ορίζει την κάθετη θέση. Αν χρησιμοποιήσουμε μία, η άλλη θα είναι από προεπιλογή η λέξη center.

Παράδειγμα

body{
  background-image: url("myimage.jpg");
  background-position: right top;
}

Ένας άλλος τρόπος για να ορίσουμε τη θέση του φόντου μας είναι να χρησιμοποιήσουμε δύο ποσοστά, από 0% ως 100%. Το πρώτο ορίζει την οριζόντια θέση και το δεύτερο ορίζει την κάθετη θέση.

Παράδειγμα

body{
  background-image: url("myimage.jpg");
  background-position: 100% 0%; /* δεξιά επάνω */
}

Ένας τρίτος τρόπος για να ορίσουμε τη θέση του φόντου είναι να χρησιμοποιήσουμε αριθμό pixels. Πάλι θα χρησιμοποιήσουμε δύο αριθμούς όπου ο πρώτος ορίζει την οριζόντια θέση και ο δεύτερος ορίζει την κάθετη θέση.

Παράδειγμα

body{
  background-image: url("myimage.jpg");
  background-position: 100px 0px; /* δεξιά επάνω */
}

Background-repeat

Με την ιδιότητα background-repeat (επανάληψη φόντου) ορίζουμε αν θα επαναλαμβάνεται το φόντο μας. Χρησιμοποιούμε τις λέξεις κλειδιά repeat, no-repeat, repeat-x, repeat-y. Με τη λέξη repeat το φόντο μας θα επαναληφθεί και οριζόντια και κάθετα μέχρι να καλύψει το στοιχείο που έχουμε ορίσει. Με τη λέξη no-repeat το φόντο δεν επαναλαμβάνεται προς καμία κατεύθυνση και με τις repeat-x και repeat-y επαναλαβάνεται οριζόντια και κάθετα αντίστοιχα.

Παράδειγμα

body{
  background-image: url("myimage.jpg");
  background-repeat: repeat-x; /* οριζόντια επανάληψη */
}

Background-attachment

Με την ιδιότητα background-attachment (προσάρτηση φόντου) ορίζουμε αν το φόντο μας θα μένει σταθερό ή αν θα ακολουθεί το στοιχείο στο οποίο έχουμε ορίσει το φόντο. Οι λέξεις κλειδιά που χρησιμοποιούμε είναι scroll, fixed και local. Με τη λέξη fixed το φόντο παραμένει σταθερό, ασχέτως της κίνησης που κάνουμε στη σελίδα (πχ. scroll down), ενώ με τη λέξη scroll το φόντο θα εξαφανισθεί αν κινηθούμε προς τα κάτω και θα εμφανιστεί όταν κινηθούμε ξανά προς το στοιχείο που έχει το φόντο. Με τη λέξη local το φόντο ακολουθεί το περιεχόμενο του στοιχείου στο οποίο το έχουμε ορίσει.

Παράδειγμα

body{
  background-image: url("myimage.jpg");
  background-attachment: fixed; 
}

Βασικές ιδιότητες φόντου στη CSS