background-size css3

        

Siden er opdateret 19. 7. 2013

Med background-size kan man ændre den viste størrelse på et baggrundsbillede uden at behøve ændre billedfilen.

#demo {
background-image:url(img.gif);
background-position: center center;
background-size:50px 33px;
background-repeat:no-repeat;
}

vil se sådan ud :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi. In hac habitasse platea dictumst. Proin viverra pellentesque odio et laoreet. Nulla dignissim nulla sit amet sem euismod congue. Suspendisse iaculis viverra diam, vitae luctus mauris tincidunt a. Fusce pulvinar, erat non fringilla pharetra, mi tortor suscipit nunc, id rutrum erat justo a massa.

Det til baggrunden anvendte billede har faktisk denne størrelse:

De værdier, du ser sat på background-size, har følgende funktioner:

Mulige værdier:

px-størrelse
Sætter baggrundsbilledets viste størrelse i pixels × pixels
%
Sætter baggrundsbilledets viste størrelse som en procentandel af den til rådighed værende plads. Med en angivelse vælges den største størrelse, hvis ikke den angivne størrelse har samme procentandel på begge leder. Sættes to værdier, strækkes billedet, så størrelsen passer på begge leder.
cover
Sætter baggrundsbilledets viste størrelse, så hele pladsen udnyttes. Billedet øges ligeligt på begge leder og eventuelt overskydende billed-information på den ene led vises ikke.
contain
Sætter baggrundsbilledets viste størrelse, så pladsen udnyttes fuldt på den led, der først passer med billedstørrelsen. Eventuel overskydende plads dækkes ikke, med mindre der også er defineret background-repeat:repeat;.
Valid XHTML og CSS / Copyright © Erik Ginnerskov december 2011
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - background-size
sidens top
Brugere lige nu: 1
Home Mail