In this video, you are going to learn how to put an image into a grid layout using the CSS property "background-attachment". And this will be helpful for you to get an idea about how to manage a grid layout and how to divide a grid layout into rows and columns.
In this video, you are going to learn how to put an image into a grid layout using the CSS property "background-attachment". And this will be helpful for you to get an idea about how to manage a grid layout and how to divide a grid layout into rows and columns. So Let's see how to design this grid layout with a background-attachment.
Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS Grid Layout With Background Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
</div>
</body>
</html>
style.css
body{
margin: 15px;
padding: 0;
}
.bg{
background: url(1.jpg);
}
.container{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(3, 1fr);
}
.container div{
height: 220px;
background-size: cover;
background-attachment: fixed;
}
.container div:nth-child(1){
grid-column: 1 / 3;
}
.container div:nth-child(7){
grid-column: 2 / 4;
}
.container div:nth-child(11){
grid-column: 1 / 4;
}
HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
Great Learning brings you this 10-hour tutorial on HTML and CSS to help you understand everything you need to know about this topic and getting started on the journey to learn it well. This video starts off with HTLM and associated concepts such as editors, skeleton, comments, elements, tags, etc. Then we look at CSS and related concepts including its basic structure, editors, comments, its types, selectors, colour, background, text and so on. Finally, we look at an HTML and CSS project to apply every concept discussed heretofore! This video teaches HTML and CSS and their key functions and concepts with a variety of demonstrations & examples to help you get started on the right foot.
The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.
HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.