CSS background-attachment
Proprietatea background-attachment setează dacă imaginea de fundal se derulează odată cu pagina sau rămâne fixă.
Fundal fix
Imaginea de fundal este fixă, deci nu se mișcă atunci când derulezi pagina.
Prompt
O pagină HTML cu o imagine de fundal fixă, care nu se derulează odată cu pagina.
Într-un bloc
<style> intern, setează background-image al body-ului la url("img_tree.png"), cu background-repeat no-repeat, background-position right top și background-attachment fixed. Adaugă un titlu și suficiente paragrafe pentru ca pagina să se poată derula, astfel încât fundalul fix să rămână pe loc.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background image is fixed. Scroll down the page and the image stays in place.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.</p>
</body>
</html>
Fundal care se derulează
Imaginea de fundal se derulează împreună cu restul paginii.
Prompt
O pagină HTML cu o imagine de fundal care se derulează odată cu pagina.
Într-un bloc
<style> intern, setează background-image al body-ului la url("img_tree.png"), cu background-repeat no-repeat, background-position right top și background-attachment scroll. Adaugă un titlu și suficiente paragrafe pentru ca pagina să se poată derula, astfel încât fundalul să se miște odată cu conținutul.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background image scrolls with the page. Scroll down and the image moves with the content.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.</p>
</body>
</html>
Proprietatea CSS Background Attachment
Proprietatea acoperită în această pagină este background-attachment, care setează dacă o imagine de fundal este fixă sau se derulează odată cu restul paginii.