How to Add Continue Reading in Html

nine,697

Learn how to set an image of whatever size as the background of an HTML element total screen in CSS!

• Create A Div Chemical element
• Make A Div Total Screen
• Add Background Image
• Adjust Background Paradigm Size
• Middle Groundwork Image

Create A Container Div Element

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

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

Make The Container Div Total Screen

And then, make the div full screen so that the groundwork prototype fits the total screen of the browser window.

Note: Yous can change the size of the container div if you practice non desire the prototype to make full the whole screen because the background paradigm will only be visible based on the size of the container div.

There are a few means to brand a div full screen but I'thousand going to utilise the height:100% CSS property to achieve it this time.

This is a 2-step process.

1. Add together a couple of CSS properties to the html and torso selectors. Setting the margin to 0 will go rid of any white space around the browser window and set the peak to 100%.

          html, body {   margin:0;   superlative:100%; }        

2. Add together iii backdrop to the .bg-container selector.

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

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

So, gear up pinnacle:100% which will stretch the height of the .bg-container to the bottom border of the browser viewport. In order to get the elevation to work, make sure you've added the height:100% to the html and body selector above, otherwise, information technology won't work.

To see that .bg-container, add the border with 5px width, solid style, and carmine color.

At this stage, I have an outcome that the whorl confined appear on the correct and lesser which hide the red border.

Let'southward prepare that.

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

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

As y'all can see from the below picture, the scroll bar is gone merely the border at the lesser and right are all the same hidden.

This is because when y'all give a border to the element that is already 100% width, the border will be 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 lesser stretched beyond the edge of the browser viewport.

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

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

This style, I know if I add together an prototype as a background prototype to this container it volition be visible to the full screen.

Recommended
Pattern Cool Registration Form Using HTML & CSS

Add Groundwork Image Full Screen

Let'southward add the background prototype to the .bg-container.

For that, all I have to do is add the background-image CSS holding to the .bg-container with the image URL path which volition usually be the image location of your project binder or any web paradigm URL.

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

The value of the background-epitome property must be the discussion url followed by the image URL path in single or double quotes inside the parenthesis.

Recommended
CSS Middle A Div Horizontally & Vertically

Adapt Background Image Size

Expect…we're non done still!

As you can see the image is cutting off because the paradigm size is bigger than the width of the .bg-container. I can set it using the background-size property. It has the main two values Cover and Incorporate.

Encompass will endeavor to fit the elevation of the image to the screen height and stretch the width proportionately.

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

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

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

As you lot can see, the width of the paradigm I chose is wider than the height and so when yous utilize incorporate as a value of groundwork-size, the image width stretched to fit the browser width simply the height is curt and y'all can see the same image repeating a second time which is the default beliefs.

Let'due south set that.

Use groundwork-repeat: no-repeat CSS property to the .bg-container to get rid of the repeated images at the bottom.

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

Every bit I mentioned before, the image I chose is wider than higher and so in this instance it'southward obvious to apply background-size :cover in gild to fill the screen nicely with the image.

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

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

Center Background Image

This is skillful but what if I want to show a specific part of the paradigm rather than the default?

Well…we tin exercise this hands using the background-position property.

Permit's say I want to center the tree to the viewport. To practise that, all I have to practice is add middle middle as the value to the groundwork-position holding inside the .bg-container.

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

Alternatively, if you want to show the height left side of the image, you lot guessed it…the value of the background-position will exist top left, and and then on!

In that location you take it!

cooleymovered.blogspot.com

Source: https://softauthor.com/css-make-background-image-full-screen/

Share this post