Many programmers and website builders face challenges of inserting a background image to their HTML and CSS websites. Others struggle a lot in passing through Google videos, and they can't get the best codes to paste direct to their website.
Having a good experience in website development, I'm going to give you the best and straightforward codes which will help you come from these problems.
To place a background image, you need to first identify where to position your image on the website. Second, look for a good image which can fit the whole place. In this case, the image should be very decorative to attract many readers or visitors to your website.
If you are using external CSS, make sure your CSS link is connected with the HTML pages.
<link rel="stylesheet" href="index.css">
After that, give the name of the container using class="" or id="". The class in CSS is usually used with(.) while Id is used with(#).
At the HTML page, insert this codes.
<div id="home">
</div>
In CSS page, insert your image.
#home {
background-image: url('wapp.jpeg');
background-size: cover;
background-position: center;
min-height: 100%;
height: 500px;
position: relative;
text-align: center;
padding-top: 0;
}
Thank you for visiting me.
