Scribd Logo
Upload

Welcome to Scribd!

  • 14 views

    CSS Backgrounds

    Uploaded by

    Jessica Sehgal

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CSS Backgrounds

    Uploaded by

    Jessica Sehgal
    14 views1 page

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    14 views1 page

    CSS Backgrounds

    Uploaded by

    Jessica Sehgal

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 1

     Menu  Log in

    Dark mode
    Dark code
      HTML   

    CSS Backgrounds
    ‹ Previous Next ›

    The CSS background properties are used to add


    background effects for elements.

    In these chapters, you will learn about the


    following CSS background properties:

    background-color
    background-image
    background-repeat
    background-attachment
    background-position
    background (shorthand property)

    CSS background-color
    The background-color property specifies the
    background color of an element.

    Example
    The background color of a page is set like this:

    body {
    background-color: lightblue;
    }

    Try it Yourself »

    With CSS, a color is most often specified by:

    a valid color name - like "red"


    a HEX value - like "#ff0000"
    an RGB value - like "rgb(255,0,0)"

    Look at CSS Color Values for a complete list of


    possible color values.

    Other Elements
    You can set the background color for any HTML
    elements:

    Example
    Here, the <h1>, <p>, and <div> elements will
    have different background colors:

    h1 {
    background-color: green;
    }

    div {
    background-color: lightblue;
    }

    p {
    background-color: yellow;
    }

    Try it Yourself »

    Opacity / Transparency
    The opacity property specifies the
    opacity/transparency of an element. It can take a
    value from 0.0 - 1.0. The lower value, the more
    transparent:

    opacity 1

    opacity 0.6

    opacity 0.3

    opacity 0.1

    Example

    div {
    background-color: green;
    opacity: 0.3;
    }

    Try it Yourself »

    Note: When using the opacity property to add


    transparency to the background of an element, all
    of its child elements inherit the same transparency.
    This can make the text inside a fully transparent
    element hard to read.

    Transparency using RGBA


    If you do not want to apply opacity to child
    elements, like in our example above, use RGBA
    color values. The following example sets the opacity
    for the background color and not the text:

    100% opacity

    60% opacity

    30% opacity

    10% opacity

    You learned from our CSS Colors Chapter, that you


    can use RGB as a color value. In addition to RGB,
    you can use an RGB color value with an alpha
    channel (RGBA) - which specifies the opacity for a
    color.

    An RGBA color value is specified with: rgba(red,


    green, blue, alpha). The alpha parameter is a
    number between 0.0 (fully transparent) and 1.0
    (fully opaque).

    Tip: You will learn more about RGBA Colors in our


    CSS Colors Chapter.

    Example

    div {
    background: rgba(0, 128, 0, 0.3) /*
    Green background with 30% opacity */
    }

    Try it Yourself »

    The CSS Background Color


    Property

    Property Description

    background- Sets the background color of an


    color element

    ‹ Previous Next ›

    NEW

    We just launched
    W3Schools videos

    Explore now

    COLOR PICKER

    

    Get certified
    by completing
    a CSS
    course today!

    school
    w3 s
    2
    CE

    02

    TI 2
    R

    FI
    ED .

    Get started

    CODE GAME

    Play Game

    Report Error

    Spaces

    Pro

    Buy Certificate

    Top Tutorials
    HTML Tutorial
    CSS Tutorial
    JavaScript Tutorial
    How To Tutorial
    SQL Tutorial
    Python Tutorial
    W3.CSS Tutorial
    Bootstrap Tutorial
    PHP Tutorial
    Java Tutorial
    C++ Tutorial
    jQuery Tutorial

    Top References
    HTML Reference
    CSS Reference
    JavaScript Reference
    SQL Reference
    Python Reference
    W3.CSS Reference
    Bootstrap Reference
    PHP Reference
    HTML Colors
    Java Reference
    Angular Reference
    jQuery Reference

    Top Examples
    HTML Examples
    CSS Examples
    JavaScript Examples
    How To Examples
    SQL Examples
    Python Examples
    W3.CSS Examples
    Bootstrap Examples
    PHP Examples
    Java Examples
    XML Examples
    jQuery Examples

    Get Certified
    HTML Certificate
    CSS Certificate
    JavaScript Certificate
    Front End Certificate
    SQL Certificate
    Python Certificate
    PHP Certificate
    jQuery Certificate
    Java Certificate
    C++ Certificate
    C# Certificate
    XML Certificate

    FORUM | ABOUT

    W3Schools is optimized for learning and training. Examples


    might be simplified to improve reading and learning.
    Tutorials, references, and examples are constantly reviewed
    to avoid errors, but we cannot warrant full correctness of all
    content. While using W3Schools, you agree to have read
    and accepted our terms of use, cookie and privacy policy.

    Copyright 1999-2022 by Refsnes Data. All Rights Reserved.


    W3Schools is Powered by W3.CSS.

    You might also like