css background image size to fit div with Add Multiple Images, Responsive images and media queries, Covering the area, but keeping the aspect ratio, Stretching images to fill the area, Keeping the aspect ratio, Setting background-size to fit screen, Specifying the width for scaling, Adding responsive images with CSS, HTML5 picture element and Responsive image: useful tip.
css background image size to fit div
Syntax:
background: value; -webkit-background-size: value; -moz-background-size: value; -o-background-size: value; background-size: value;
Fit background image to div
use the background-size property
background-size: contain;
scale the background image
background-size: cover;
background-size: 100% 100%;
Example 1: Perfect Full Page Background Image
CSS make image fill whole background Example
html {
background: url(demo/media/wallpaper.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Example 2: HTML Stretch Background Image
<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>
<style type="text/css">
.background {
box-sizing: border-box;
width: 100%;
height: 200px;
padding: 2px;
background-image: url(/fruites/new/mango.gif);
border: 1px solid black;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="background">
Stretched background...
</div>
<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">
</body>
</html>
Example 3: Stretching the Background Image for the Whole Page
<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
background-image: url(/fruites/new/mango.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<p>This page has a stretched background image...</p>
<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">
</body>
</html>
Example 4: Using background-size: cover
<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
background-image: url(/fruites/new/mango.gif);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>This page has a stretched background image...</p>
<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">
</body>
</html>
Example 5: Using background-size: contain
<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
background-image: url(/fruites/new/mango.gif);
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<p>This page has a stretched background image...</p>
<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">
</body>
</html>
Don’t Miss : css background image opacity
How to Stretch a Background Image to Fit a Web Page
css background image size to fit div using The Fallback Way
body {
background: url('wallpaper.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
Add Multiple Images
Background pattern from Toptal Subtle Patterns example: css background image size to fit div
div {
height: 300px;
width: 100%;
background-image:
url("demo/media/wallpaper.jpg"),
url("demo/media/wallpaper2.jpg");
background-repeat: no-repeat, no-repeat;
background-position: right, left;
}
Example 1: Setting background-size to fit screen
html {
background: url('wallpaper.png') no-repeat center fixed;
background-size: cover;
}
using HTML5 picture element
<picture> <source srcset="wallpaper-small.jpg" media="(max-width: 300px)"> <source srcset="wallpaper.jpg"> <img src="wallpaper.jpg" alt="cannot display"> </picture>
Example 2: CSS background image size to fit screen
css background image size to fit div
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizing background images with background-size</title>
<style>
body {
background-image: url(images/wallpaper.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
#container { width: auto; margin: 50px auto; padding: 20px; background: #eee; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
</style>
<head>
<body>
<div id="container">
<h2>CSS background image size to fit full screen - how to create - example</h2>
This is a way to add background image for a web page using html. <br />
In this case I used:<br />
<strong>html</strong>
to cover the entire background. <br />
</div>
<html/>
</body>
Don’t Miss : gradient overlay css
Another way:
body {
background: url(wallpaper.jpg) no-repeat;
background-size: 100%;
}
I hope you get an idea about css background image size to fit div.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.