CSS-background-fixed

Fixed background

HTML

It should be better to use the bootstrap getting started template. https://getbootstrap.com/docs/4.4/getting-started/introduction/#starter-template

提示：為了避免第二個<div>無法往上捲動，請加入第三個長<div>。

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <div id="first" class="container-fluid"></div>
    <div id="second" class="container-fluid"></div>
    <div style="height:1000px;background-color:black;"></div>
</body>

</html>

CSS

#first {
    background-image: url("assets/123.png");
    min-height: 2400px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#second {
    background-image: url("assets/123_2.png");
    min-height: 1200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
PreviousCSS - Media QueryNextPositioning-sticky

Last updated

Was this helpful?