Background-attachment property

Table of Contents

CSS Background-attachment Property

The background-attachment property is used to sets whether a background image scrolls with the page, fixed and local.

CSS Syntax→ background-attachment: scroll|fixed|local;

Scroll

The background image will scroll with the page. It is default.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://nielitbhu.com/image.jpg");
background-repeat: no-repeat;
background-attachment: scroll;

}
</style>
</head>
<body>
<h1>Example of background-attachment scroll Property;</h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>

fixed

The background image will not scroll with the page.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://nielitbhu.com/image.jpg");
background-repeat: no-repeat;
background-attachment: local;

}
</style>
</head>
<body>
<h1>Example of background-attachment local Property;</h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>

local

The background image will scroll with the element’s contents .

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("download.jpg");
background-repeat: no-repeat;
background-attachment: local;

}
</style>
</head>
<body>
<h1> background-attachment: local;</h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>

What is CSS?

What is CSS? CSS stands for Cascading Style Sheets.it saves a lot of work and it also control the layout ...

CSS Selectors

CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. CSS selectors are ...

Combinator selectors

Combinator selectors The Combinator selectors select elements based on a specific relationship between them. There are four different combinators selectors ...

Pseudo-class selectors

CSS Pseudo-class selectors Pseudo-class selectors select elements based on a certain state like . Style an element when a user ...

Pseudo-elements selectors

Pseudo-elements selectors It select and style a part of an element. They are two types: First-line pseudo-element First-letter pseudo-element First-line ...

Attribute selectors

CSS Attribute Selectors The Attribute selectors select elements based on an attribute or attribute value. [attribute] This selector is used ...

CSS Properties

CSS Properties There are different properties are found in latest CSS3 Properties CSS Back Ground properties Click here CSS Block ...

CSS Background Property

CSS Back Ground properties The background properties are shorthand property for html element: Background-color It is used for element background ...

CSS Background-position Property

Background-position Property Using this property set the starting position of a background image like left top left center left bottom ...

CSS Background-size property

CSS Background-size Property Using this property set image size of background image. CSS Syntax→ background-size: auto|length|cover|contain; Auto→ Default value. This ...

CSS Background-Repeat Property

CSS Background-Repeat Property The background-repeat property sets how a background image repeation. CSS Syntax→ background-repeat: repeat|repeat-x|repeat-y|no-repeat; repeat Repeat-The background image ...

CSS Background-Origin Property

CSS Background-origin property The background-orgin set the property origin position. Syntax- background-origin: padding-box|border-box|content-box; Padding-box: The background image starts from the ...

Background-clip property

CSS Background-clip property The background-clip property set the how far the background (color or image) should extend within an element ...

Background-attachment property

CSS Background-attachment Property The background-attachment property is used to sets whether a background image scrolls with the page, fixed and local ...

CSS Block Properties

CSS Block Properties There are different types of block properties are used in CSS.Word-spacingLetter-spacingVertical-alignText-alignText-indentWhite-spacedisplay Word-spacing By using the word-spacing property ...

CSS Box Model Property

CSS Box Model The box model is described about design and layout.Every design and layout are created using following property: ...

CSS Border Property

CSS Border Property The border property is a shorthand property. Using this border property we insert the border width, border ...

CSS Lists

CSS Lists The CSS list properties allow you to: unordered lists (<ul>)- the list items are marked with bullets. ordered ...

CSS Position Property

CSS Position Property Using the position property set the position of an element. These are different types like static, relative, ...

CSS Tables Property

CSS Tables Property Collapse Table Borders The border-collapse property sets the double table border into a single border. Example <!DOCTYPE> ...

CSS Menu Design Navigation Bar

CSS Menu Design Navigation Bar There are two types of CSS Menu Design Navigation Bar Vertical Navigation Bar Horizontal Navigation ...

CSS Vertical Navigation Bar

CSS Vertical Navigation Bar Vertical Navigation Menu Creation Step 1 Example <!DOCTYPE html> <html> <body> <ul> <li><a href="#home">Home</a></li> ...

CSS Horizontal Navigation Bar

Horizontal Navigation Bar Horizontal Navigation Bar Creation Step1 Example <!DOCTYPE html> <html> <head> <style> ul { ...

CSS Drop-Down Menu

Drop down Menu Example <!DOCTYPE html> <html> <head> <style> ul { margin: 0; ...

CSS Sticky Navbar

Sticky Navigation Bar Example <!DOCTYPE html> <html> <head> <style> body { font-size: 28px; ...

CSS Background-attachment Property

Scroll

fixed

local

Contribute Now

Don’t miss Join Our Community!