Design Post Update

What web design trends will merge in 2017? Find out here.

2017 is here and it’s bringing more technological breakthroughs and surprising web design trends than the world has ever seen. With each passing day, the modern world hits a new record for digital advancement. The future of web design looks bright for those ready to embrace positive changes.

In this article we shine some light on the web design trends that we think will be big in 2017, so here they are, our tips for the big web design trends of 2017 ...

• Touch
• Big
• Space
• Original
• Video
• Custom
• Voice
• Animation

Touch...

We think haptic technology will be a big deal in 2017

The mobile-first approach has been around for a few years now, but with mobile-phones now officially named as the primary devices used for browsing the web, more companies are realising the importance of having a site that effectively delivers content on a smaller screen. Furthermore, engaging users on mobile devices is becoming more difficult as the 'scroll' and 'swipe' design approach  used in many apps has led to users having a very short attention span when using their mobile device. This is where haptic technology comes in.

There are three sensory systems related to sense of touch in humans: cutaneous, kinesthetic and haptic. All perceptions mediated by cutaneous and/or kinesthetic sensibility are referred to as tactual perception.

The sense of touch may be classified as passive and active, and the term "haptic" is often associated with active touch to communicate or recognize objects.

Haptic communication recreates the sense of touch by applying forces, vibrations, or motions to the user through their mobile device.  Currently the Samsung Anycall Haptic enables users to feel clicks, vibrations and other tactile input. In all, it provides the user with 22 kinds of touch sensations in response to various user actions.

But how does all this relate to web design? Well, for example a strong vibration could be activated to discourage users when exiting a website or app. On the flip side a relaxing, pulsing sensation could be output from a meditation app on your mobile device. There are, of course, numerous other possibilities and I think 2017 is the year when we will see haptic technology emerge as a major feature in web and app design for mobile devices.

Back To Top

Big...

This website utilises big text and big images to dominate the screen

Images, Text and Video are all set to be big in 2017, and I mean that literally.

With the rise in mobile usage, users are reading less, scrolling more and browsing quicker so designers are having to go big to grab attention.

Full screen background images were popular in 2016 and we also saw the introduction of full screen video backgrounds too on websites such as pay-pal, more on that later though. This trend is expected to continue and become more widespread in 2017 as websites try to get their point across quickly and visually.

Large custom typography is also set to be used more to create personality, evoke emotion and set tone. As device resolutions become sharper and type becomes more easy to read on-screen, companies will look to push the limits of typography even further in 2017 to appeal to their target audience.

So expect to see an increase in over-sized and full screen type this year, hopefully it'll be of the beautiful, unique and hand-rendered type and not the bold, blocky and in your face type. We'll have more on the benefits of a custom approach later.

Back To Top

Space...

Back To Top

Original...

Expect to see more illustrations like this in 2017

As discussed above, the rise of mobile device and UI patterns now places UX as the most important aspect of design, meaning that many sites now look and work in similar ways. This is fine for users as they now know, instinctively, how to navigate around a website that they have never visited but it's not fine for a company who wants to stand out from the crowd.

In order for a brand to really stand out and strike a connection with it’s audience, while still using a design users can manage, they’ll need carefully considered and completely bespoke visuals which are more representative of who they really are. We can see this being a big web design trend in 2017 and is one that we really look forward to seeing.

Original illustrations are fantastic, versatile mediums for creating playful and friendly visuals which add an element of fun to a site. 

Talented illustrators are able to create illustrations which are full of personality and tailored to match the tone of the brand, something which brands will be striving for more than an ever in 2017.

A custom, purpose taken photograph is the main feature of this website

With a unique style of illustration established, brands are then able to roll that out through their entire identity, for use in large header images, custom iconography and beautifully animated visuals. Dropbox, is a great example of a brand who uses illustration to create beautiful, friendly and totally unique visuals which are full of character to appeal to their users.

This demand for originality will hopefully lead to the death of the dreaded stock imagery that we see everyday across the web and lead to a rise in more authentic photography in 2017. Brands and designers will now be thinking more carefully about the imagery they use on site, hiring professional photographers to take their shots which frame them in the way they want to be seen.

Unfortunately, it’ll probably be a long time before much of the cheesy stock photography completely disappears, but expect to see it disappear a little in 2017.

Back To Top

Video...

This website utilises a full screen video background to epic effect

One trend that grew quickly the past year is video content and we expect to see it grow further in 2017 especially as video content is now increasingly cost-effective to produce, with apps that enable quick and easy live video recording and professional-grade productions. The combination of decreasing costs of video and growing popularity of this medium is the perfect storm for video to overtake written content as king in 2017.

They say a picture paints a thousand words, but a video does that tenfold,

Video, although by no means new, is long-established and versatile medium, useful for story-telling, marketing and vlogging alike, and has several advantages over traditional photography. Where static imagery is flat and motionless, video is altogether more dynamic, using sound and movement to appeal to the senses and hold attention for longer.


Watch the video image above for a few seconds and see how encapsulating it can be. Much like with animation, a moving image on a page instantly captures the users attention, drawing them in so brands are able to get across their carefully constructed narrative and message.

Video is quickly taking over the internet, and the above reasons are testament to how successful it is as a means for content delivery. As well as using video for marketing purposes, it’s becoming more widespread in social media, with the recent releases of live-streaming services Periscope, and Meerkat illustrating the demand people have to not only view video content, but produce their own.

The benefits of video outlined above are reason enough for brands to want to incorporate it, but they are also great reasons for any freelance web designer to start using more video as a feature in their designs.

Back To Top

Custom...

Unique and personalised online user experiences are increasing sought after

It’s no secret that responsive web design has taken the web dev community by storm. In 2017, however, we think responsive design will reach a whole new level. Instead of simply adapting based on device, websites will adapt based on each user to give them an entirely custom experience. For example a website’s content, color scheme, font sizes, and spacing could respond to accommodate a user based on their age.

5 Different Approaches To Creating a Website

It is important to state before we start that the creation of your website is just one of the steps in the web design process and it's not the first one! So I would really recommend reviewing the web design process first to make sure you are adequately prepared for this stage. So many people jump straight in at this stage and waste a lot of their time because they have not completed the previous steps in the process so don't say you weren't warned. Now with that little rant over, lets look at your options for creating the website.

There are 5 main ways to create a website and although not all of them require knowledge of HTML and CSS it is definitely better if you have at least a basic understanding of them.

The 5 ways to create a website are...

The basic principles of CSS floating are displayed in this simple diagram

Floating elements with CSS

Any HTML element or <div> block can be floated to the right or to left by using the property float. That is to say that the <div> block or element, including its contents, either floats to the right or to the left in a document (or another containing box). The content which follows will fill the gap left behind. Float can be set as either left, right or none. The following figure illustrates the general principle in a little more detail than the on above.

CSS float in action

If, for example, we would like to have text wrapping around a picture we could float the image to the left and the following content would fill the gap (thus wrapping around it). The result would be like this...

CSS float example

The HTML code for the example above, look as follows:

<div id="picture"> <img src="images/bill.jpg" alt="Bill Gates"> </div><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture, so none of the image is cut off, and then set the property float to left:

#picture { float: left; width: 100px;}

Floats can also be used to create columns in a document. To create two columns, you simply have to structure the desired columns in the HTML code with <div> as follows.

<div id="column1"><p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p></div><div id="column2"><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p></div>

Now the desired width of the columns is set to 50%, and then you simply float each column to the left by defining the property float. Try it out for yourself.

#column1 {float: left; width: 50%;} #column2 {float: left; width: 50%;}

Clear (Stop filling after floating)

The clear property is used to control how the elements following floated elements in a document behave. By default, the subsequent elements are moved up to fill the available space which will be freed up when a box is floated to the side. The property clear can assume the values left, right, both or none. The principle is, if clear, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above. In other words, it won't fill the gap left behind.


<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div><h1>Bill Gates</h1><p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

To avoid the text from floating up to fill the gap and sit next to the picture, we can add the following CSS, Try it out for yourself.

#picture {float: left; width: 100px; } div.floatstop {clear: both;}

Next Up

Floats are useful in many situations and will often be used together with positioning. In the next section we will take a closer look at how to position html elements using CSS. There are two main types of positioning, relative and absolute, both are explained.

CSS Padding, Borders and Margin

Margin and Padding:

Now let's look at how you can use your knowledge of the box model to change the presentation of elements by setting the margin and padding properties as shown in the above example.

An element has four sides: right, left, top and bottom. 
The margin is the distance from each side to the neighbouring element or the outer borders of the document. As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

CSS Margins

The CSS code for the above page would look like this,

body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;}

Or, like background and font, you could compile the CSS code using just margin. Margin recognises the values in the order top, right, bottom, left.
body {margin: 100px 40px 10px 70px;}

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

p {margin: 5px 50px 5px 50px;}

Padding can also be understood as 'filling'. This makes sense as padding does not directly affect the distance of the element to other elements but rather defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colours. By defining padding for the headlines, you change how much filling there will be around the text in each headline. Try out the code below yourself and see what it looks like.

h1 {background: yellow; padding: 20px 20px 20px 80px;} h2 {background: orange; padding-left:120px;}

Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

border-color

CSS Borders

CSS Border Styles

The CSS Box Model

The CSS Box Model

The box model in CSS describes the boxes which are automatically generated for all HTML-elements and which you can control using CSS. The box model contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed. The illustration above is purely theoretical, so let's try to put this new information into practice.
<h1>Article 1:</h1><p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p>
By utilising our knowledge of the box model and adding some CSS (examples to follow) to the previous HTML the example could be presented as follows...



The image below shows how each HTML element is surrounded by boxes which we can adjust using CSS.

The numbers around the areas are the margin and padding values

Height and Width

The height and width of each element or 'box', as represented by the box model can also be edited using CSS. In this section, we will take a look at how you easily can define the height and width of an element. With the width-property, you can define a certain width of an element. The example below sets the width of a <div> with a class value of 'box' to 200px.

div.box {width: 200px;}

In the example above as we did not specify a height, the height of the box will be set by the content of the box. You can of course set the height of an element with the property height if you wish.

As an example let us try to make the box in the previous example 500px high:

div.box {height: 500px; width: 200px;}

Tip: If you set the height or width to a value too small the content may prevent the code from working or in other cases some of the content will disappear. To ensure neither of these thing happen use the code overflow:auto. This will create a scroll bar on the right side of the div block so you can scroll up or down to view the content while still retaining the height and width you set. See the example below.

Next Up

In the next lesson we will look at examples for the padding, border and margin that we have identified as part of the box Model.

class and id work together with div and span to help you make the most of your CSS

This section on CSS actually focuses on the use of HTML attributes 'class' and 'id' and the HTML elements <div> and <span>. These are very important if you are to use CSS effectively as they hold the key to giving you complete control over every aspect of your website.

Class

Sometimes you want to apply a special style to a particular element or a particular group of elements and yet not every single element of that type! Confused? Don't be. Let's say that we have two lists of links to different grapes used for white wine and red wine. The HTML code could look like this:

<p>Grapes for white wine:</p><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li></ul><p>Grapes for red wine:</p><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul>

What if we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue? To achieve this, we first need to divide the links into two categories using the HTML attribute 'class'.

So we assign a class to each link using the HTML attribute class. We use class instead of id as class is used for multiple or group effects while id is used for single or individual effects. Let us try to specify some HTML classes from the example above:

<p>Grapes for white wine:</p><ul><li><a href="ri.htm" class="whitewine">Riesling</a></li><li><a href="ch.htm" class="whitewine">Chardonnay</a></li><li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li></ul>

<p>Grapes for red wine:</p><ul><li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li><li><a href="me.htm" class="redwine">Merlot</a></li><li><a href="pn.htm" class="redwine">Pinot Noir</a></li></ul>

We can then define special properties for links belonging to white wine and red wine, respectively by using .classname after the element it was used on (in this case 'a') in the style sheet of the document.

a {color: blue;} a.whitewine {color: #FFBB00;} a.redwine {color: #800000;}

The above CSS code combined with the HTML shown earlier will result in the following...

This is a normal link

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Id

In addition to grouping elements with class, you might need to identify one unique element. This is done by using the attribute id. What is special about the attribute id is that there cannot be two elements in the same document with the same id. Each id has to be unique. Now, let us take a look at an example of a possible usage of id:

<h1>Chapter 1</h1>... <h2>Chapter 1.1</h2>... <h1>Chapter 2</h1>... <h2>Chapter 2.1</h2>...

The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows:

<h1 id="c1">Chapter 1</h1>... <h2 id="c1-1">Chapter 1.1</h2>... <h1 id="c2">Chapter 2</h1>... <h2 id="c2-1">Chapter 2.1</h2>...

Let us say that the headline for chapter 1.1 must be in red. As shown in the example below you must define the properties in a specific element by using #id in the stylesheet of the document.

#c1-1 {color: red;}

The above CSS combined with the previous HTML would result in something like the following...

Chapter 1

Chapter 1.1

Chapter 2

Chapter 2.1

Div and Span

The HTML elements <span> and <div> are used to group and structure a document and are usually used together with the attributes class and id. The difference between div and span is that <span> is used within an element (inline) while <div> is used to group one or more elements (block-level).

Span

In My Honest Opinion, <span> is not the most useful of elements as it is only used inline so it is often easier to use basic HTML code to format the part of the element (usually text within a paragraph) that you want to edit. However, with my little rant over, let's look at an example of <span> in use. Let's take a famous Benjamin Franklin phrase.

<p>Early to bed and early to rise makes a man healthy, wealthy and wise.</p>

Let's say we want what Mr Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:

<p>Early to bed and early to rise makes a man <span class="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span class="benefit">wise</span>.</p>

In order to make those tagged words red then the CSS code would simply be...

span.benefit {color:red;}

The result would be....

Early to bed and early to rise makes a man healthy, wealthy and wise.

As mentioned earlier this is a bit long-winded for something that could have been done using the HTML <font color='red'>. Anyway not to worry, as you probably won't be using <span> too often. One element you definitely will be using though is <div>, so let's look at how it is used.

Div

As mentioned earlier while <span> is used within a block-level element, <div> is used to group one or more block-level elements. Aside from this difference, the grouping with <div> works in the same way. Let us take a look at an example with two lists of relatively recent U.S. presidents divided into their political affiliations:

<div id="democrats"><ul><li>John F. Kennedy</li><li>Lyndon B. Johnson</li><li>Jimmy Carter</li><li>Bill Clinton</li><li> Barack Obama</li></ul></div>

<div id="republicans"><ul><li>Richard Nixon</li><li>Gerald Ford</li><li>Ronald Reagan</li><li>George Bush</li><li>George W. Bush</li></ul></div>

And in our style sheet, we can utilize the grouping in the exact same way as above:

#democrats {background:blue;} #republicans {background:red;}

The above CSS code combined with the previous HTML would result in something like this...

• John F. Kennedy
• Lyndon B. Johnson
• Jimmy Carter
• Bill Clinton
• Barack Obama

• Richard Nixon
• Gerald Ford
• Ronald Reagan
• George Bush
• George W. Bush

These examples for <div> and <span> are very basic and are only intended to show you how to link the HTML elements with the associated CSS code. We will now look at the 'box model' which, when used with <div> and <span> and class and id, will really open up your design and layout possibilities with CSS.

Next Up

In the next lesson we look at the CSS Box Model which explains the details of how each HTML element is structures.

CSS LInks

You can apply the CSS that you already learned to links in order to change their backgrounds, colours, fonts, text style, etc. What we will learn in this lesson is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link (hover). This makes it possible to add useful effects to help visitors navigate your website more easily. To control these effects you use what is called a CSS pseudo-class.

Links and pseudo-classes

A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag. As you know, links are specified in HTML with <a> tags. We can therefore use 'a' as a selector for links in CSS. A basic example like the one seen below, simply changes the colour of all links to blue.

a {color: blue;}

The css code above would result in something like this (provided the HTML is already in place)

This is a link

Unlike different elements, links can have different states. It can be visited or not visited. You can use pseudo-classes to assign different styles to links. Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link. See the example CSS code below.

a:link {color: #6699CC;} a:visited {color: #660099;} a:active {background-color: #FFFF00;} a:hover {color: orange; font-style: italic;}

It is particularly popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class :hover.

CSS a:hover example 1:

a:hover {letter-spacing: 10px; font-weight:bold; color:red;}

When hovered over, the CSS code above will change your links from...

This is a link

to

This is a link

CSS a:hover example 2:

a:hover{text-transform: uppercase; font-weight:bold; color:green; background-color:yellow;}

When hovered over, the CSS code above will change your links from...

This is a link

to

This is a link

The two CSS link a:hover examples give you an idea about the various possibilities for combining different properties. You should now try to create your own effects.

Next Up

In the next lesson we will learn the basics of using the HTML elements div and span along with the HTML attributes class and id to give you more control over editing your website with CSS.

There are so many fonts to choose from but choose carefully as they have a huge impact on your websites success

Formatting Fonts With CSS

In this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be explained...

• font-family

• font-style

• font-variant

• font-weight

• font-size

• font

font-family 

The property font-family is used to set a prioritized list of fonts to be used to display a given element such as <p> or <h1>. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.
There are two types of names used to categorize fonts: family-names and generic families.

• Family-name: Examples of a family-name (often known as "font") can e.g. be "Arial", "Agency", 'Verdana'.

• Generic family: Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is Latin for 'without feet'.

The difference can also be illustrated like this...



When you list fonts for your web site, you should start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family so at least the page will be shown using a font of the same family if none of the specified fonts are available.An example of a prioritized list of fonts could is seen:

p {font-family: arial, verdana, sans-serif;} h1 {font-family: "Times New Roman", serif;}

In the sample code above, text marked as paragraphs will be displayed using the font "Arial". If this font is not installed on the user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used. Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks.

font-style 

The property font-style defines the chosen font in normal, italic or oblique. The default setting is normal. In the example below, all headlines marked with <h2> will be shown in italics.

h2 {font-style: italic;}

font-variant

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Take a look at these examples:

If font-variant is set to small-caps and no small-caps font is available the browser will show the text in upper-case instead. In the example below all headings marked with <h1> will be shown in small-caps.

h1 {font-variant: small-caps;}

font-weight 

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. In the example below all text marked with <td> (table data) will be shown in bold text.

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

font-size

The size of a font is set by the property font-size. There are many different units to choose from to describe font sizes; we will focus on the most commonly used units. See the examples below.

h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit.

font (shorthand)

Using the font short hand property, just like background it is possible to cover all the different font properties in one single property. For example, imagine these four lines of code used to describe font-properties for <p>:

p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

Using the short hand property, the code can be simplified:

p {font: italic bold 30px arial, sans-serif;}

Remember that one of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. CSS saves time and makes your life easier.

@font-family

With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts. In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property.

Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

Defining the font....

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }  

h1 {font-family: myFirstFont;}  

Next Up

In the next lesson we learn about pseudo-classes and how to use them to create link effects using CSS.

You can use CSS to add any type of background to a web page or web element

In this tutorial we will learn how to apply background colours to your website and parts of your website. We will also look at advanced methods to position and control background images. The following CSS properties will be explained, (note the American spelling of color and not colour is used in these codes).

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
• gradient backgrounds

background-color

The color property describes the foreground colour of an element. For example, imagine that we want all headlines in a document to be red. The headlines are all marked with the HTML element <h1>. The code below sets the colour of <h1> elements to red.

h1 {color: #ff0000;}

Colours can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colours ("red") or (Red, Green, Blue) RGB-values (rgb(255,0,0)).

The background-color property describes the background colour of elements. The element <body> contains all the content of a HTML document so if we want to change the background colour of an entire page, the 'background-color' property should be applied to the <body> element. Note how the two words background and color are joined with a hyphen, this is the case with all CSS properties that are made up of two or three words, they must always be joined with a hyphen.

You can also apply background colours to other elements including headlines and text. In the examples below, different background colours are applied to <body> and <h1> elements.
body {background-color: #FFCC66;} h1 {color: #990000; background-color: #FC9804;}

Notice that we applied two properties to <h1> by dividing them by a semicolon. Just like with HTML, where we could add multiple attributes, we can also add multiple properties in CSS.

background-image

The CSS property background-image is used to insert a background image. To insert an image as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.

body { background-image: url("images/sample.gif");}


body {background-image: url("sample.gif");background-repeat: no-repeat;}

background-attachment

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page. Below the two different values for background-attachment are explained.

• {Background-attachment: scroll;}  - The image scrolls with the page - unlocked 

• {Background-attachment: fixed;} - The image is locked