Fixed Background Image - No Repaint
How do I make an fixed background image - no repaint?
What is a fixed background image - no repaint? How do you make a fixed background image - no repaint? This script and codes were developed by Chung Man Chau on 15 January 2023, Sunday.
Fixed Background Image - No Repaint - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed Background Image - No Repaint</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="hero" class="hero"> <h1>No Repainting Here.</h1>
</div>
<div class="content"> <h2>Check for repainting</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, voluptatem ipsam dignissimos iusto libero dicta delectus molestiae recusandae officia ut. Corporis vitae error eos eveniet asperiores nobis odit maiores totam, veritatis accusantium consequatur architecto? Illum cupiditate, assumenda a quaerat laboriosam itaque voluptatum sed id! Inventore cupiditate laborum esse sapiente voluptate ipsa ullam soluta amet tempore, illum, voluptatibus laudantium iste, in cumque eveniet dolorem beatae nobis nisi. Atque sapiente debitis ab consequuntur, repudiandae reiciendis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus possimus architecto consequuntur asperiores fugiat nesciunt excepturi ducimus iusto ipsam rerum.</p>
</div>
</body>
</html>
Fixed Background Image - No Repaint - Script Codes CSS Codes
html, body { height: 100vh; margin: 0; font-family: Arial; line-height: 1.6;
}
.hero { align-items: center; display: flex; justify-content: center; min-height: 100%; position: relative;
}
.hero::before { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://static.pexels.com/photos/1459/street-car-vehicle-blur.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; content: ''; will-change: transform; z-index: -1;
}
h1 { color: white; font-size: 2.5em; text-transform: uppercase; text-align: center; letter-spacing: .1em;
}
.content { background: rgba(255, 255, 255, 0.8); padding: 20px;
}
Developer | Chung Man Chau |
Username | chungman93 |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 2,637 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Hover Underlining | 2,456 Kb |
Color Variables | 1,956 Kb |
Bray Wealth - Mock up - Responsive | 4,796 Kb |
Calendar Mock Up | 5,880 Kb |
Rolling Word Hover | 2,541 Kb |
CSS Masking Button Hovers | 1,173 Kb |
Target Last Row - CSS Only | 1,568 Kb |
Holy Grail Layout - CSS Grid | 2,438 Kb |
BBC Beta - Grid | 2,153 Kb |
Iphone Mockup | 3,283 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Spilled Paint | Darrylhuffman | 3,894 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!