📕
HTML
  • Course Materials
  • Tools for web basic
  • CodePen Examples
  • WEB1101
    • Rundown1101
    • Video Tutorials
    • Slides
  • HTML and CSS
    • HTML
    • CSS - basic
    • CSS - Object Decoration
    • CSS - Media Query
    • CSS-background-fixed
    • Positioning-sticky
    • Bootstrap
      • Grid and spacing
      • Useful Components
      • Component Cheatsheet
  • jquery
    • jquery basic
    • stick top
    • Progress-status bar
    • Parallax Scrolling
  • Design
    • Works by sketching
    • Movie Control
  • Case Studies
    • Great-cases
      • The Snow Fall
    • Case Studies by students
    • TW Digital 2019
    • Graphic Novel
    • Infographic
    • Ideas bottom-up by skills
    • News media outlet
  • Web1091
    • Student works 1091
    • Rundown1091
  • Appendix
    • The Color
    • File directory (Path)
    • Deployment
  • Data journalism
    • Data-Driven News Reports
Powered by GitBook
On this page
  • Fixed background
  • HTML
  • CSS

Was this helpful?

  1. HTML and CSS

CSS-background-fixed

PreviousCSS - Media QueryNextPositioning-sticky

Last updated 4 years ago

Was this helpful?

Fixed background

HTML

提示:為了避免第二個<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;
}

It should be better to use the bootstrap getting started template.

https://getbootstrap.com/docs/4.4/getting-started/introduction/#starter-template