Home Logic Battle Card RPG Godot Tutorials Linux Gaming Blog NodeJS + Postgres LAMP Stack HTML CSS PHP Website Builder ReactJS VR Tech Blog Palm Beach Techie PHP Fiddle

Intro to HTML: Attributes

Quick Copy Boxes









You can use images to create custom webpage backgrounds. You can position your image how you want it and choose how it repeats (or doesn't repeat). You can also control the size of your image and how the background image behaves when the user scrolls your page.


Add Background Image

Let's start by choosing a background-image for the body of our page.


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

➼ body - This CSS block is for the page body.
➼ background-image - This is the line of code for adding a background-image.
➼ Image URL - image.png is the URL for the image.


Background-repeat

By default, the background-image will repeat to fill the background space. However, you may not want the image to repeat, or you may want it to repeat a particular way.

Here are the background-repeat options:

✶ Deafault ✶
If nothing is specified, the image will repeat horizontally and vertically.
✶ Horizontal Reapeat ✶
background-repeat: repeat-x;
✶ Vertical Repeat ✶
background-repeat: repeat-y;
✶ No Repeat ✶
background-repeat: no-repeat;


CSS


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

➼ body - This code block is for the page body.
➼ background-image - image.png is our background image.
➼ background-repeat - It is set to no-repeat.
➼ no-repeat means the background-image will not repeat.


Background-position

By Keyword:

✶ center center ✶
background-position: center center;
✶ center top ✶
background-position: center top;
✶ center bottom ✶
background-position: center bottom;
✶ left center ✶
background-position: left center;
✶ right center ✶
background-position: right center;
✶ left top ✶
background-position:left top;
✶ left bottom ✶
background-position:left bottom;
✶ right top ✶
background-position: right top;
✶ right bottom ✶
background-position: right bottom;

Examples

➀ bottom left

background position: bottom left;


➁ top-right

background-position: top right;


➂ center center

background-position: center center;


By Coordinates:

You can also give numerical values:
background-position: x% y%;
✶ x%
This is the image's horizontal position.
✶ y%
This is the the image's verticle position.
Note:
✶ 50% 50% - same as center center
background-position: 50% 50%
✶ 0% 0% - default - same as left top
background-position: 0% 0%
✶ 100% 100% - same as right bottom
background-position: 100% 100%

If the x% y% confuses you, don't worry about it. In most cases you can just use the named positions (i.e. top center). If a situation occurs where you need a possition that is not covered by the names, you can come back to x% y% then.

Examples

➀ x% = 0% and y% = 100%

background position: 0% 100%;


➁ x% = 100% and y% = 0%

background-position: 100% 0%;


➂ x% = 50% y% = 50%

background-position: 50% 50%;

Now, let's add a background-position to our background image.

CSS


    body {
      background-image: url("image.png");
      background-repeat: no-repeat;
      background-position: top center;
    }

➼ body - This code block is for the page body.
➼ background-image - image.png is our background image.
➼ background-repeat - It is set to no-repeat.
➼ background-position - It is set to top center;


It will look something like this:



Background-attachment

Using background-attachment, you can choose to have your background-image at a fixed position or you can have it scroll with the page body. Scroll is the default setting, but if you want your back-image fixed, just add this line of code:

background-attachment: fixed;

Now, let's make our background-image fixed.

CSS


    body {
      background-image: url("image.png");
      background-repeat: no-repeat;
      background-position: top center;
      background-attachment: fixed;
    }

➼ body - This code block is for the page body.
➼ background-image - image.png is our background image.
➼ background-repeat - It is set to no-repeat.
➼ background-position - It is set to top center;
➼ background-attchment - It is fixed.

Background-size

You can also control the size of your background image with the background-size property. There are a few different ways to describe the background-size.

By Pixle:

background-size: 250px 350px;

Where,
➼ 250px is the width
and
➼ 350px is the height

If you only list one value:
background-size: 250px;

The width will be set to that value (250px) and the height will automatically be set to stay in proportion.

By Percent:

This will size your background picture as a % of it's elements. In all of our examples we are adding the background to the body element.
body {
    background-size: 25% 50%;
}

Where,
➼ 25% sets the image width to 25% of the body's width
and
➼ 50% sets the image height to 50% of the body's height.

If you only list one value:
background-size: 25%;

The width will be set to that % (25% of the body's width) and the height will automatically be set to stay in proportion.

By Keyword:

✶ Cover: Makes the background-image as big as it needs to be to cover the element. The full image will probably not be in view.
Code: background-size: cover;

✶ Contain: Makes the background-image as big as it can, while still displaying the whole image.
Code: background-size: contain;

Color Selector



Hex:


RBG:

Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.