How to set an image as background of an element, section etc. of a html webpage:
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backgroung image</title>
<style>
/* body{
background-image: url("https://webneel.com/wallpaper/sites/default/files/images/08-2018/2-nature-wallpaper-grass.jpg");
background-repeat: no-repeat;
background-position: bottom;
background-attachment: fixed;
} */
body {
background: url("https://webneel.com/wallpaper/sites/default/files/images/08-2018/2-nature-wallpaper-grass.jpg") no-repeat bottom fixed;
}
header {
height: 500px;
}
section {
/* background-color: #fff; */
/* background-image: url("https://webneel.com/wallpaper/sites/default/files/images/08-2018/2-nature-wallpaper-grass.jpg"); */
background-color: pink;
height: 200px;
background-repeat: no-repeat;
background-position: bottom;
background-attachment: fixed;
}
</style>
</head>
<body>
<header>
This is header
</header>
<section box-1> This is box-1</section>
<section class="box-2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio deserunt, possimus
provident sapiente corrupti repellat blanditiis aspernatur eaque, debitis, aperiam minima nesciunt quaerat quae
quidem. Officia quae earum a eum. Necessitatibus molestiae totam excepturi facere dolore nostrum, exercitationem
repudiandae voluptas explicabo ullam eveniet corporis non doloribus est rem! Neque atque possimus facere iure
laborum placeat ex, ipsum sed, ipsam accusamus vero inventore aspernatur totam explicabo laboriosam. Amet
aliquam nobis ullam vitae nostrum quo ipsa, voluptas adipisci quasi, incidunt repellendus similique?</section>
</body>
</html>
0 Comments