CSS Background
CSS background properties are like tools to create backgrounds for things on a webpage.
In these sections, you'll discover different CSS background characteristics:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
background (shorthand property)
CSS background-color
The background-color property tells us the color of an element's background.
Using CSS, we usually describe a color by:
- An acceptable color name - such as "red."
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
Other Elements
In HTML code, you can pick the color for different sections' backgrounds.
Opacity / Transparency
The opacity property tells how see-through something is. It can be a number from 0.0 to 1.0. If the number is lower, that means it's more see-through:
Note:When you use the opacity property to make something see-through in the background of a box, everything inside that box also becomes see-through. This can make it difficult to read the text inside a box that's completely see-through.
Transparency using RGBA
If you don't want to make things inside something see-through (like what we showed before), you can use RGBA colors. This next example changes how see-through the background is, not the words on top of it.
CSS background-image
The background-image thing lets you pick a picture to use as the background of something.Normally, the picture is used over and over again to cover the whole thing.
Note: When you choose a background picture, make sure it doesn't make the text hard to read.
You can also choose a background image for certain parts of a page, such as the "p" element.
CSS background-repeat
Normally, the background-image feature makes an image repeat in both horizontal and vertical directions.
A special aspect that causes an image to appear multiple times in both sideways and up-and-down directions.
If the picture is copied side by side in a horizontal direction(background-repeat: repeat-x;), the background will appear nicer.
Tip: To make a picture repeat up and down, use background-repeat: repeat-y;
CSS background-repeat: no-repeat
The background-repeat property also tells the system to display the background image just one time.
In the example we saw, the picture behind it was put exactly where the words are. But we want to move the picture somewhere else so that it doesn't bother the words too much.
CSS background-position
The background-position property is used to
specify the position of the background image.
CSS background-attachment
The background-attachment property decides if the background image should move when you scroll or stay in one place while the rest of the page moves.
CSS background - Shorthand property
You can make your code shorter by putting all the background settings into one property. This is known as a shorthand property.
When you use the shorthand property, remember that the order of the property values matters.
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
If one of the property values is not there, it's okay as long as the others are in the right order. Remember, we're not using the background-attachment property in the examples because it doesn't have a value.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div> This is a text inside a div element. <p>This paragraph has its own background color.</p> We are still in the div element. </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: rgb(0 151 167);
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Boxes</h1>
<p>"When you use the opacity property to make an element's background somewhat see-through, its child elements also become see-through. This may cause difficulty in reading the text within an element that is entirely transparent:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0 151 167);
}
div.first {
background: rgb(0 151 167);
}
div.second {
background: rgb(0 151 167);
}
div.third {
background: rgb(0 151 167);
}
</style>
</head>
<body>
<h1>Transparent Boxes 2</h1>
<p>Result with opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>Result with rgba():</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
<div>
<h1>default</h1>
</div>
<p>See how the text becomes see-through, and the background color also becomes less visible when the opacity property is applied.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/mountains.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url("/assets/files/light-color.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph has an image as the background!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/light-color.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/light-color.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/light-color.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Background image example.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/light-color.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>In this case, the background picture appears only once and is also placed at a distance from the text.</p>
<p>In this illustration, we've included extra space on the right to prevent the text from being affected by the background image.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/light-color.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>
<p>
<strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.
</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/assets/files/light-color.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property determines if the background image should move along with the page scrolling or remain fixed in place (not scrolling with the rest of the page).</p>
<p>
<strong>Tip:</strong> If you can't find any scrollbars, attempt adjusting the size of your web browser window.
</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("/assets/files/light-color.jpg") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a short way of saying and setting all the background properties at once.</p>
<p>In this case, the background picture appears only once and is placed at the top-right corner.</p>
<p>We've included a right margin to prevent the text from overlapping with the background image.</p>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL