# CSS-background-fixed

## Fixed background

![](https://2277503657-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHpWM2qI66ASAuworLy%2F-MKi261hrSAqJO1xkfZt%2F-MKi2wyFlhzLrd5Ae0YI%2Fimage.png?alt=media\&token=2b934ef3-d9a0-42df-bee4-6aabc5b7fecf)

## 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>。

```markup
<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

```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;
}
```
