HTML Academy
The background-attachment Property
Introduction to Backgrounds7/18
Back to the list of tasks
  • 1. The background-color Property
  • 2. The background-image Property
  • 3. The background-repeat Property
  • 4. The background-position Property
  • 5. A Little More on background-position
  • 6. The background-attachment Property
  • 7. The background Property
  • 8. Summary of “Backgrounds: An Introduction. Part 1”
  • 9. Challenge: Cat Comics
  • 10. JPEG format
  • 11. The PNG-8 Format
  • 12. PNG-24 format
  • 13. The GIF Format
  • 14. Multiple backgrounds
  • 15. Effects with a Repeating Background
  • 16. Sprites
  • 17. Summary of “Backgrounds: An Introduction. Part 2”
  • 18. Challenge: CAT Academy
Summary of “Backgrounds: An Introduction. Part 1”
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The background Property

The background of an element can be set using separate properties: background-color, background-image, and so on. All of this can be quite cumbersome to code.

You can set the background using the shorthand property background, for which you can specify its components separated by spaces:

background: [bc] [bi] [br] [bp] [ba];
/* Legend:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/

If any component is not specified, then the default value will be used. Below are examples.

background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;

In the first example, the background color is assigned simply.

In the second example, a non-repeating background image is specified together with a default transparent background color. The image is positioned in the upper left corner.

In the third example, a background image is specified together with its position. It is also assigned a default transparent background color and the specification to repeat in all directions.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The background Property</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"> Hypnocat </div> <div class="block block2"> Fishcat </div> </body> </html>
CSS
body { padding: 20px; font-size: 20px; font-family: "Tahoma", sans-serif; } .block { width: 140px; margin: 25px auto; padding: 25px 0; padding-left: 90px; color: white; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background: none; } .block2 { background: none; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Set the background for the first block as follows: background color #e74c3c, image cat_eyes.png, no repeat, and image offset of 10px to the left and5px up.
    2. Set the background for the second block as follows: background color #2980b9, image cat_fish.png, no repeat, and image offset of 5px up.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.