Coding | CSS

CSS-Property background-origin

magnetar 708612 1920

background-position: center 30px:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

background-position: center top; background-origin: border-box:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

background-position: center top; background-origin: padding-box:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

background-position: center top; background-origin: content-box:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Bei background-origin: border-box gehen weitere Positionsangaben von der linken oberen Ecke des Elements samt Rand aus (content-startposition + padding + border),
bei background-origin: padding-box von der linken oberen Startposition des Elements nach einer border (content-startposition + padding), und
bei background-origin: content-box von der linken oberen Startposition des Contents (content-startposition).

.box {
    background-image:url(image.png);
    background-repeat:no-repeat;
    border:solid 15px #cccccc;
    background-color:#333333;
    padding:30px;
    color:#ffffff;
} 

.box .inner {
    border:solid 1px #ffffff;
}

.border-box,
.padding-box,
.content-box {
   background-position: center top;
}

.position-box {
   background-position: center 30px;
}

.border-box { 
    background-origin:border-box;
}

.padding-box { 
    background-origin:padding-box;
}

.content-box {
    background-origin:content-box;
}

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.