# Background images

In CSS it's also possible to work with images. With the background-image property you can specify an image and use it as a background image for an element.

property	example	description
`background-image`	`background-image: url();`	background image for this element
`background-attachment`	`background-attachment: fixed`	sets whether a background image scrolls with the rest of the page, or is fixed
`background-position`	`background-position: top left`	sets the starting position of a background image
`background-repeat`	`background-repeat: repeat-x`	sets if/how a background image is repeated

# background-image

The background-image property sets one (or more) background image(s) for an element
By default, a background image is placed at the top left corner of an element, and repeated both vertically and horizontally

body {
  background-image: url(pattern.png);
}

1
2
3

EMMET instruction	result
`bgi` + `TAB`	`background-image: url();`

# background-attachment

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed
- Possible values: fixed, scroll (= default)

body {
  background-attachment: fixed; /* The background image will not scroll with the page */
}

1
2
3

EMMET instruction	result
`bga` + `TAB`	`background-attachment: ;`
`bga:f` + `TAB`	`background-attachment: fixed;`

# background-position

The background-position property sets the (initial) position of a background image
- Possible values (see interactive example): left top (= default), top left,left center,bottom right,right top, ...px ...px, ...
  - first value for horizontal positioning: left, center, right or use fixed units like px, %, ...
  - second value for vertical positioning: top, center, bottom or use fixed units like px, %, ...
  - horizontal and vertical positioning values are interchangeable:
    background-position: center top; = background-position: top center;

body {
  background-position: center bottom; /* The background image will be placed at the center and bottom of the element */
}

body {
  background-position: 50px 100px; /* The background image will be placed at 50px from the left and 100px from the top of the window */
}

1
2
3
4
5
6
7

EMMET instruction	result
`bgp` + `TAB`	`background-position: 0 0;`

# background-repeat

The background-repeat property sets if/how a background image is repeated
- Possible values: repeat (= default), repeat-x,repeat-y,no-repeat

body {
  background-repeat: repeat-x; /* The background image is repeated only horizontally */
}

body {
  background-repeat: repeat-y; /* The background image is repeated only vertically */
}

body {
  background-repeat: no-repeat; /* The background-image is not repeated. The image will only be shown once. */
}

1
2
3
4
5
6
7
8
9
10
11

EMMET instruction	result
`bgr` + `TAB`	`background-repeat: ;`
`bgr:n` + `TAB`	`background-repeat: no-repeat;`
`bgr:x` + `TAB`	`background-repeat: repeat-x;`
`bgr:y` + `TAB`	`background-repeat: repeat-y;`

# Example 1: default background-image

    
<header>
    <h1>HTML Ipsum Presents</h1>
</header>

<article>
    <h2>CSS for starters</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus exercitationem explicabo in laborum
        numquam, pariatur porro qui quibusdam sint unde.</p>
    <h3>CSS Advanced</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, facilis?</p>
</article>

<footer>
    <h2>Contact</h2>
    <p>&phone;&nbsp;014&nbsp;562310</p>
    <p>Tip: <a href="https://www.lipsum.com/">lipsum.com</a></p>
    <p>Go to <a href="#">top</a> of page</p>
</footer>

    
body {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    /*line-height: 24px;*/
    line-height: 1.5;
    background-image: url("https://itf-web-essentials.netlify.app/example/bgImage/pattern.png");
}

h1 {
    font-size: 50px;
}

# Example 2: extra properties for scroll behavior, position and repetition

    
<header>
    <h1>HTML Ipsum Presents</h1>
</header>

<article>
    <h2>CSS for starters</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus exercitationem explicabo in laborum
        numquam, pariatur porro qui quibusdam sint unde.</p>
    <h3>CSS Advanced</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, facilis?</p>
</article>

<footer>
    <h2>Contact</h2>
    <p>&phone;&nbsp;014&nbsp;562310</p>
    <p>Tip: <a href="https://www.lipsum.com/">lipsum.com</a></p>
    <p>Go to <a href="#">top</a> of page</p>
</footer>

    
body {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    /*line-height: 24px;*/
    line-height: 1.5;
    background-image: url("https://itf-web-essentials.netlify.app/example/bgImage/pattern2.png");
    background-repeat: repeat-x;
    background-position: top left;
    background-attachment: fixed;
}

h1 {
    font-size: 50px;
}

# Example 3: all-in-one modern example

    
<header>
    <h1>Discover Nature</h1>
</header>

<article>
    <h2>Flora and fauna</h2>
    <p>Exploration adventures woodland trek, flora and fauna, in the whispering winds of the forest trails. The babbling brooks narrate tales of the ancient stones and hidden paths, where every step is a journey of discovery.</p>
    <h3>Forests</h3>
    <p>Under the canopy of whispering leaves, witness the artistic patterns of nature's canvas, as every hue of green paints the tapestry of life in vibrant strokes. Here, the spirit of exploration and wonder blooms with every unfolding petal and fluttering butterfly, inviting curious minds to venture deeper.</p>
</article>

    
body {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    /*line-height: 24px;*/
    line-height: 1.5;
    margin: 0;
}

header {
    line-height: 200px;
    background-image: url("https://itf-web-essentials.netlify.app/example/bgImage/forest.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
}

h1 {
    font-size: 40px;
    text-align: center;
    color: white;
    margin: 0;
}

# CSS3 patterns

In Example 1 we implemented a pattern by repeating a background-image. An alternative is to code the pattern in CSS, without using images
- Some interesting examples of Lea Verou's CSS3 Patterns gallery can be found in the example below
  - Experiment with altering some values in these patterns
You don't have to be able to code such patterns yourself!

# Example

    
<h1>CSS3 Patterns: example</h1>
<h2><a href="https://projects.verou.me/css3patterns/#bricks">Bricks</a></h2>
<section id="one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi similique aperiam eos, dicta, quisquam molestiae nemo? Debitis explicabo rem officia tempore, dicta, ducimus ipsa eum incidunt laudantium vero omnis, temporibus est, magni? Dicta recusandae doloribus neque debitis porro suscipit sequi autem accusamus aliquid. In magni optio ab, iste nostrum commodi.</p>
</section>
<h2><a href="https://projects.verou.me/css3patterns/#diagonal-checkerboard">Diagonal checkerboard</a></h2>
<section id="two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsum adipisci fugit, aliquam, iste quibusdam incidunt nam sit dolor vel aut facilis aliquid nesciunt, id corporis, nostrum necessitatibus. Mollitia et, accusamus qui voluptate debitis itaque accusantium, necessitatibus ea voluptatibus aliquam perferendis dolorum exercitationem, pariatur labore fugit nesciunt odit. Veniam, quidem.</p>
</section>
<h2><a href="https://projects.verou.me/css3patterns/#honeycomb">HoneyComb</a></h2>
<section id="three">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, blanditiis dolore nesciunt qui possimus ipsam officiis quae consectetur similique aliquam nisi sit cupiditate in, consequatur pariatur nemo, sint nulla explicabo sequi numquam inventore sunt hic! Doloremque, aut officiis facilis et, quam beatae dignissimos sint adipisci recusandae voluptatibus dolorum, quos ullam?</p>
</section>

    
section {
    padding: 25px;
}

p {
    background-color: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 15px;
}

section#one {
    background-color: silver;
    background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
        linear-gradient(155deg, #d00 23px, transparent 23px),
        linear-gradient(335deg, #b00 23px, transparent 23px),
        linear-gradient(155deg, #d00 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

section#two {
    background-color: #eee;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
        linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 60px 60px;
}

section#three {
    background:
        radial-gradient(circle farthest-side at 0% 50%, #fb1 23.5%, rgba(240, 166, 17, 0) 0)21px 30px,
        radial-gradient(circle farthest-side at 0% 50%, #B71 24%, rgba(240, 166, 17, 0) 0)19px 30px,
        linear-gradient(#fb1 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #fb1 0)0 0,
        linear-gradient(150deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0)0 0,
        linear-gradient(30deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0)0 0,
        linear-gradient(90deg, #B71 2%, #fb1 0, #fb1 98%, #B71 0%)0 0 #fb1;
    background-size: 40px 60px;
}

# Linear gradients

There has been a (recent) revival of gradients, as you can now code them in CSS as well (and you are no longer dependent on Photoshopped images with a colour gradient)
Again, you rarely code such gradients yourself. Use a gradient generator such as cssgradient.io instead.

# Example

    
<h1>CSS3 gradients: example</h1>
<h2>Example 1</h2>
<section id="one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi similique aperiam eos, dicta, quisquam molestiae nemo? Debitis explicabo rem officia tempore, dicta, ducimus ipsa eum incidunt laudantium vero omnis, temporibus est, magni? Dicta recusandae doloribus neque debitis porro suscipit sequi autem accusamus aliquid. In magni optio ab, iste nostrum commodi.</p>
</section>
<h2>Example 2</h2>
<section id="two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsum adipisci fugit, aliquam, iste quibusdam incidunt nam sit dolor vel aut facilis aliquid nesciunt, id corporis, nostrum necessitatibus. Mollitia et, accusamus qui voluptate debitis itaque accusantium, necessitatibus ea voluptatibus aliquam perferendis dolorum exercitationem, pariatur labore fugit nesciunt odit. Veniam, quidem.</p>
</section>

    
section {
    padding: 25px;
}

p {
    background-color: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 15px;
}

section#one {
    background: rgb(240, 76, 37);
    background: linear-gradient(90deg, rgba(240, 76, 37, 1) 0%, rgba(0, 156, 171, 1) 100%);
}

section#two {
    background: rgb(204, 27, 36);
    background: radial-gradient(circle, rgba(204, 27, 36, 1) 0%, rgba(245, 239, 53, 1) 50%, rgba(9, 130, 50, 1) 100%);
}

DESIGN TIP

Background patterns have a big impact on how a website is perceived.
- Going for a modern look? Probably best to avoid them.
- Going for a retro look? Use them with caution.