CSS3 Background
CSS3 Background
CSS3 background property applies a background image on a webpage. There are five different background properties that you can apply inside the HTML5 document.
- Background-color
- Background-image
- Background-attachment
- Background-repeat
- Background-position
-
CSS3 Background Color
CSS3 background color property applies background color to an HTML element. You can assign color to an element like this:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p {
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy</h1>
<p>We are learning how to apply backgorund colors to elements</p>
</body>
</html>
The output of this code will be
-
CSS3 Background Image
CSS3 background image property applies background image to the background of an HTML element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('CSS3.png');
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy</h1>
</body>
</html>
The output of this code will be
The background image should be selected cautiously according to the text color. If background image and text color are not chosen perfectly, SEO might hurt.
-
CSS3 Background Repeat
CSS3 background-repeat property repeats an image either horizontally or vertically. Generally, an image looks more appealing. It repeats horizontally.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('CSS3.png');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy</h1>
</body>
</html>
The output of this code will be
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('CSS3.png');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy</h1>
</body>
</html>
The output of this code will be
-
CSS3 Background-attachment
The background-attachment property specifies whether an image will remain fixed or scroll with the rest of the page in the browser window. If you assign the value fixed to the background-attachment property, the image will remain fixed while you scroll the browser.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('CSS3.png');
background-repeat: repeat-y;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy </h1>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
</body>
</html>
The output of this code will be
-
CSS3 Background Position
CSS3 background-position property specifies the position of the background image. If you do not specify the background-position value, the browser will place your image at the top-left of the web page.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('CSS3.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy </h1>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
<p>The image will remain fixed while you scroll the page</p>
</body>
</html>
The output of this code will be
Learn more about CSS.
External Sources
https://en.wikipedia.org/wiki/CSS
