CSS Programming ❯ Background-Size Property

IHYPRESS.NET

CSS

HOME | ASP | C | CSS | HTML | JAVASCRIPT | PERL | PHP | PYTHON | RUBY | SVG

 CSS ❯ Background-Size Property<04>

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Background-Size Property</title>
</head>

<body style="font-size:1.2em; font-family:sans-serif;">
<p style="width:600px; height:150px; background:url(https://ihypress.com/textures/rainbow.jpg);">
Original background
</p>

<p style="width:600px; height:150px; background:url(https://ihypress.com/textures/rainbow.jpg); background-size:90px 90px;">
Background resized to 90px/90px
</p>

<p style="width:600px; height:150px; background:url(https://ihypress.com/textures/rainbow.jpg); background-size:50% 50%;">
Background resized to 50%/50%
</p>

<p style="width:600px; height:150px; background:url(https://ihypress.com/textures/rainbow.jpg); background-size:10% 80%;">
Background resized to 10%/80%
</p>
</body></html>

Background-Size Property
Original background

Background resized to 90px/90px

Background resized to 50%/50%

Background resized to 10%/80%

COPYRIGHT © 2015-2024 IHYPRESS.NET. A DIVISION OF IHY PRESS. ALL RIGHTS RESERVED.