How To Fit Background Image To Screen Css

11,127

Learn how to set up an image of whatsoever size equally the background of an HTML element total screen in CSS!

Create A Div Element
Make A Div Full Screen
Add Groundwork Image
Suit Background Prototype Size
Heart Background Image

Create A Container Div Element

Create a div or whatever block-level HTML element with the class name called .bg-container where I'm going to add a background prototype into.

          <div class="bg-container"> </div>

Make The Container Div Total Screen

Then, brand the div full screen then that the background epitome fits the full screen of the browser window.

Note: You tin modify the size of the container div if y'all do not want the image to fill up the whole screen because the background image will only be visible based on the size of the container div.

There are a few ways to make a div full screen but I'm going to use the top:100% CSS property to attain it this time.

This is a two-stride process.

Add a couple of CSS properties to the html and body selectors. Setting the margin to 0 will get rid of any white space around the browser window and fix the acme to 100%.

          html, trunk {   margin:0;   height:100%; }

2. Add three properties to the .bg-container selector.

          .bg-container {   width:100%;   acme:100%;   border:5px solid reddish; }

I've explicitly set up the width to 100%, but we do not accept to because div is a block-level element and its default width is stretched to its parent width, in this case, body.

And then, set height:100% which will stretch the pinnacle of the .bg-container to the lesser edge of the browser viewport. In order to get the height to work, make certain you've added the superlative:100% to the html and torso selector to a higher place, otherwise, it won't work.

To meet that .bg-container, add the border with 5px width, solid way, and ruddy color.

At this stage, I take an issue that the coil bars appear on the right and bottom which hibernate the red border.

Let's fix that.

To hide the coil bar, add together overflow: hidden to the html and trunk CSS selectors.

          html, body {   margin:0;   height:100%;   overflow:hidden; }

As you can see from the below picture, the scroll bar is gone but the border at the bottom and right are still hidden.

This is because when yous give a edge to the element that is already 100% width, the border will exist added to the container in addition to the 100% width on both left and right sides. That's why the border on the right and bottom stretched beyond the edge of the browser viewport.

To bring the border back in, in other words, include the border inside the 100% width, all I have to add is the box-sizing:edge-box CSS belongings to the .bg-container.

          .bg-container {   width:100%;   superlative:100%;    border:5px solid red;   box-sizing:border-box; }

This fashion, I know if I add an image equally a background prototype to this container it will exist visible to the full screen.

Recommended
Design Cool Registration Grade Using HTML & CSS

Add together Groundwork Image Total Screen

Permit's add the background paradigm to the .bg-container.

For that, all I accept to do is add together the background-paradigm CSS belongings to the .bg-container with the image URL path which will unremarkably be the epitome location of your projection folder or any web image URL.

          .bg-container {   groundwork-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");   width:100%;   peak:100%;    border:5px solid carmine;   box-sizing:edge-box; }

The value of the background-image property must be the word url followed past the image URL path in single or double quotes within the parenthesis.

Recommended
CSS Center A Div Horizontally & Vertically

Arrange Background Image Size

Wait…we're not washed still!

As you can see the image is cut off because the prototype size is bigger than the width of the .bg-container. I tin can fix it using the background-size holding. Information technology has the master ii values Cover and Contain.

Cover will attempt to fit the height of the image to the screen summit and stretch the width proportionately.

          .bg-container {   background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");   background-size:encompass;   ... }

Incorporate will try to fit the width of the image to the screen width and stretch the height proportionately.

          .bg-container {   background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");   background-size:contain;   ... }

As you can run into, the width of the image I chose is wider than the height so when you use contain as a value of background-size, the prototype width stretched to fit the browser width but the pinnacle is short and you tin see the aforementioned image repeating a second time which is the default behavior.

Let's gear up that.

Apply groundwork-repeat: no-repeat CSS property to the .bg-container to become rid of the repeated images at the lesser.

          .bg-container {   background-paradigm: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");   groundwork-size:comprise;   background-repeat:no-repeat;   ... }

As I mentioned earlier, the prototype I chose is wider than higher and then in this instance it's obvious to utilize background-size :cover in order to fill the screen nicely with the image.

          .bg-container {   groundwork-prototype: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");   background-size:cover;   background-repeat:no-echo;   ... }

Recommended
Must-Know CSS Flexbox Responsive Multi-Column Layout Explained

Center Background Image

This is proficient but what if I desire to prove a specific function of the image rather than the default?

Well…we tin can do this easily using the background-position property.

Let's say I want to middle the tree to the viewport. To practise that, all I have to do is add center heart as the value to the background-position property within the .bg-container.

          .bg-container {   groundwork-epitome: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");   background-size:embrace;   background-echo:no-repeat;   background-position:center center;   ... }

Alternatively, if y'all want to testify the height left side of the image, you guessed it…the value of the groundwork-position will be top left, and so on!

There you have it!