HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS background image size to fit screen


How To Create a Full Height and Width Image
Many web developers want to cover their background with an image, so, that it is embedded on the entire surface of the background. We can do this purely through CSS due to the background-size property.

CSS background image size to fit full screen - how to create - example


We can use html element (better than body). We set a fixed and centered background image on it, then adjust it's size using background-size set to the cover keyword.

Example 1:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS background image size to fit full screen - how to create - example</title>
<style>
body {
font-family: "Comic Sans MS", cursive;
font-size: 16px;
color: #036;
}
h1,h2,h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
html {
background: url(https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#container { width: 600px; margin: 50px auto; padding: 20px; background: white; -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">
<h1>CSS background image size to fit full screen - how to create - example</h1>
This is a way to add background image for a web page using html. <br />
In this case I used:<br />
<strong>html</strong> {<br />
background: url (uploads/css-background-image-size-fit-full-screen.jpg) no-repeat center center fixed;<br />
-webkit-background-size: cover;<br />
-moz-background-size: cover;<br />
-o-background-size: cover;<br />
background-size: cover;<br />
}<br />
to cover the entire background. <br />
</div>
</body>

HTML cod above will display this result for CSS background image - how to create -

css border radius

Note: Another way:

body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

This property works in Chrome 10.5+, Safari 5+, IE 9+, Firefox 4+, Opera 10.5+, and the major mobile browsers.

css background image size to fit screen, mobille, to fit div, full screen, width, height CSS background image size to fit full screen - css tutorial

2705. CSS Levels - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csslevels.htm

3011. CSS max width - max height - CSS responsive, css tutorial
CSS max width - max height - CSS responsive css tutorial
http://www.agernic.com/css-tutorial/css-max-width-max-height-css-responsive.html

825. Features of w3resource CSS tutorials

https://www.w3resource.com/css/what-you-will-learn.php

3191. How to include, how to incorporate CSS in HTML, css tutorial
How to include, how to incorporate CSS in HTML css tutorial
https://www.agernic.com/css-tutorial/how-to-include-how-to-incorporate-css-in-html.html

2702. CSS Cursors - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csscursors.htm

2706. CSS Links - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csslinks.htm

Your add here
PHP str_replace() function

PHP explode() function

PHP trim() function

PHP strtolower() function

PHP str_repeat() function

PHP ltrim() function

PHP isset() Function

PHP strstr() function

PHP lcfirst() function

PHP html_entity_decode() function

PHP implode() function

PHP wordwrap() function

PHP define() function

PHP strtoupper() function

PHP strcmp() function

PHP strip_tags() function

HTML button onclick - How to create a HTML button style onclick
SQL Select data from a database.
CSS rounded corners
Learn PHP online from the basic to the advanced
How to add text, paragraf in HTML
Fashion Templates