Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with the many variations of HTML background properties

In this article we will talk about HTML code for background, we will see the stylization of these HTML elements.

The property background

The Background property allows you to control the color of the background of an element, set an image as the background, and position an image on a page.

The main properties of a stylized background are:

Property Description Values
background Property to set all the properties of the background in a statement background-color, background-image, background-repeat background-attachment, background-position
background-attachment Specifies whether a background image is fixed or scrolls with the rest of the page scroll, fixed
background-color Sets the color of the background of an element. color-rgb, color-hex, color-name, transparent
background-image Sets an image as the background. url, none
background-position Sets the starting position of a background image. top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos.
background-repeat Establishes a background image will be repeated or not. repeat, repeat-x, reapeat-y, no-repeat

In our example, we will choose a random image and use it as background and apply it all styles.

First we create our HTML document, and with just a simple div which will be the div that will receive the image.

Listing 1: HTML page

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>how to work with the many variations of properties of background - MrBool Tutorial</title>
    
    <link rel="stylesheet" type="text/css"  href="style.css" />
</head>
<body>
    <div id="teste">
    </div>
</body>
</html>

Now we start to apply the effects css.

Background-color

First we use the background-color to apply a color to the background of our site.

Listing 2: background-color

body{
    background-color: #082767;
}

Remember that colors can be chosen by the color name in English by rgb color table and also for hexadecimal color table.

Having our background color set, we now enter our image as the background of the div, so we'll use the background-image, as seen below:

Background-image

Note: We define a size of 400 x 300px in width and height to our div so we can demonstrate the effects we want.

Listing 3: background-image

#teste{
    width: 400px;
    height: 300px;
    background-image: url(logolc.png);
}

Until now we used two properties of background, let's see how it's getting our tutorial?

Example of background color and image

Figure 1: Example of background color and image

By default browsers assume some properties, as we see in the first image, it is by default being repeated and positioning, but with the help of other properties we can handle this in a very simple way and let the image exactly as we want.

Background-repeat

Let's see the different variations of image repetition. Let's add three more div's in our HTML document with different id's and we will apply the following css effect on them:

Listing 4: background-repeat

body{
    background-color: #082767;
}
#teste{
    width: 400px;
    height: 100px;
    background-image: url(logolc.png);
    background-repeat: repeat;
}
#teste1{
    width: 400px;
    height: 150px;
    background-image: url(logolc.png);
    background-repeat: repeat-x;
}
#teste2{
    width: 400px;
    height: 150px;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
}
#teste3{
    width: 400px;
    height: 100px;
    background-image: url(logolc.png);
    background-repeat: repeat-y;
}


In Figure 2 we can see what happens with the image in different cases of repetition.

Usando o background-repeat

Figure 2: Using background-repeat

Now let's talk some other properties:

Background-attachment

This property is very cool, because she is who specifies whether a background image is fixed or scrolls with the rest of the page, often used when we want to highlight on any image and want it to remain fixed on the screen, for example.

She has two values​​, fixed and scroll, which define the picture freezes on the screen or if it will roll like the rest of the page. To use it is very simple, we will see how to accomplish both.

Listing 5: Example of background-attachment

#teste{
    width: 400px;
    height: 200px;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#teste_1{
    width: 400px;
    height: 200px;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
}


background-position

Now let's talk about the positioning of the background to this we use the background-position property. There are several options for defining the positioning of the background, in the table at the beginning of this tutorial is saying what.

This is also a very useful property, as it is with it we can define exactly where our image will position itself within our div, in the following example, I will put a border on the div so we can more easily see the limits of the div and thus see the image placement is consistent with what we define the property.

Listing 6: Example of background-position

#teste{
    width: 400px;
    height: 200px;
    border: 1px solid;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

In the above code, we define the position of the image is: bottom right, ie, the image will be positioned at the bottom right of the div, as we can see in the image below.

Example of positioning of the background

Figure 3: Example of positioning of the background

I hope everyone has understood how to work with the many variations of properties of background and feel free to ask questions and air concerns in the comments, and I hope you enjoyed until the next tutorial.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login