Εικόνα φόντου (Background Image)

Παράδειγμα: background-image

Εισαγωγή εικόνας φόντου η οποία επαναλαμβάνεται μέχρι να γεμίσει το φόντο.

div { 
	background-image: url("./images/green-logo.png");
}

Παράδειγμα: background-color

Εισαγωγή εικόνας φόντου σε συνδυασμό με χρώμα φόντου.

div { 
	background-image: url("./images/green-logo.png");
	background-color: pink;
}

Παράδειγμα: background-repeat

Εισαγωγή εικόνας φόντου χωρίς επανάληψη. Χρησιμοποιούμε την ιδιότητα: background-repeat.

div { 
	background-image: url("./images/green-logo.png");
	background-repeat: no-repeat;
	background-color: pink;
}

Άλλες τιμές για την ιδιότητα background-repeat είναι:

/* Τιμές λέξεις-κλειδιά */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Τιμές για οριζόντια και κάθετη επανάληψη */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Καθολικές τιμές */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Παράδειγμα με πολλαπλές εικόνες φόντου

Χρησιμοποιούμε διαδοχικές συναρτήσεις url() χωρισμένες με κόμμα.

div { 
	background-image: url("./images/green-logo.png"), url("./images/tutor.edu.gr.png");
	background-repeat: no-repeat;
	background-color: pink;
}

Παράδειγμα: background-size

Ορισμός διαστάσεων για την εικόνα φόντου με την ιδιότητα: background-size.

div { 
	background-image: url("./images/green-logo.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-color: pink;
}

Άλλες τιμές για την ιδιότητα background-size είναι:

/* Τιμές λέξεις-κλειδιά */
background-size: cover;
background-size: contain;

/* Τιμές για πλάτος το ύψος θεωρείται auto */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Τιμές για πλάτος, ύψος */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Τιμές για πολλαπλές εικόνες φόντου */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Καθολικές τιμές */
background-size: inherit;
background-size: initial;
background-size: unset;	

Παράδειγμα

Ορισμός θέσης ή στοίχισης για την εικόνα φόντου με την ιδιότητα: background-position.

div { 
	background-image: url("./images/green-logo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-color: pink;
}

Άλλες τιμές για την ιδιότητα background-position είναι:

/* Τιμές λέξεις-κλειδιά */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* Εκατοστιαίες τιμές */
background-position: 25% 75%;

/* Τιμές μήκους */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Θέση για πολλαπλές εικόνες */
background-position: 0 0, center;

/* Τιμές Edge offsets */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Καθολικές τιμές */
background-position: inherit;
background-position: initial;
background-position: unset;

Παράδειγμα

Ορισμός origin για την εικόνα φόντου με την ιδιότητα: background-origin.

div { 
	background-image: url("./images/green-logo.png");
	background-repeat: no-repeat;
	background-origin: border-box;
	background-color: pink;
}

Άλλες τιμές για την ιδιότητα background-origin είναι:

/* Τιμές λέξεις-κλειδιά */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Καθολικές τιμές */
background-origin: inherit;
background-origin: initial;
background-origin: unset;