Menu
I'm using
background-size: 100%; To fit my background image (in the body-tag) to the browser window.
But is there a CSS3 background-property to set a minimum-size?
Or will I need some div-"trick" like:
<div id="bg"> <img src="images/bg.jpg" alt=""> </div> #bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; } 
964
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.
Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques. There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.
The background-size property also accepts a contain keyword. This scales image so it fits the container. In other words, the image will grow or shrink proportionally but the width and height will not exceed the container’s dimensions: background-size also accepts the cover keyword.
If a percentage is used, the dimension is based on the containing element — NOT the size of the image, e.g. The width of the background image therefore depends on the size of its container.
Definition and Usage. The background property is a shorthand property for: background-color. background-image. background-position. background-size. background-repeat.
I think you are looking for
background-size: contain; OR
background-size: cover; The difference being that cover specifies that the background image should be as small as possible while maintaining its aspect ratio. contain on the other hand specifies that the background image should be as large as possible.
See the MDN documentation here.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
