Url upload 1 resources l_159000220_bn3.jpg no-repeat center top

You can use the ``6 value by itself, but if you try to use just `404 not found`1 by itself, the CSS rule will be invalid and none of the background properties will work at all.

What a user sees on a website will impact how good their user experience is. It will also affect how easily they can use the whole site in general.

Adding images to the background of certain parts of a website is often more visually appealing and interesting than just changing the background-color.

Modern browsers support a variety of image file types like

section {
    background-repeat: repeat;
        }

3,

section {
    background-repeat: repeat;
        }

4,

section {
    background-repeat: repeat;
        }

5, and

section {
    background-repeat: repeat;
        }

6.

This article explains how to add images to your HTML code and how to then fine-tune them to look better.

Background Image Syntax

The first step is to make sure you create an assets directory (folder) to hold the images you want to use in your project.

For example we can create an

section {
    background-repeat: repeat;
        }

7 folder in the project we are working on and add an image called

section {
    background-repeat: repeat;
        }

8 that we want to use.

The

section {
    background-repeat: repeat;
        }

9 CSS property allows you to then place the image behind any HTML element you wish.

This could either be the whole page (by using the

section {
    background-repeat: no-repeat;
        }

0 selector in CSS which targets the

section {
    background-repeat: no-repeat;
        }

1 element in our HTML), or just a standalone specific part of the page such as a

section {
    background-repeat: no-repeat;
        }

2 element like in the example below.

To add a

section {
    background-repeat: repeat;
        }

9 to a section tag in your

section {
    background-repeat: no-repeat;
        }

4 file, write the following code:

section {
     background-image: url("images/sunset.png");
        }

Let's discuss what's going on here in detail:

• section {

  background-repeat: no-repeat;  
      }  
  

  2 specifies the tag you want to add the image to.
• section {

  background-repeat: no-repeat;  
      }  
  

  6 is used to tell CSS where our image is located.
• Inside the parentheses, section {

  background-repeat: no-repeat;  
      }  
  

  7 is the path to the image. This lets the browser know what URL to pull.
• The path in this example is called a section {

  background-repeat: no-repeat;  
      }  
  

  8 path which means it is a local file, relative to our project and to our current working directory and is not a web address. To add images we can also use an

  section {

  background-repeat: no-repeat;  
      }  
  

  9 path, which is a full web address and starts with a domain URL (

  section {

  background-repeat: repeat-y;  
      }  
  

  0).
• Using quotes is a good habit but we can omit them, so section {

  background-repeat: repeat-y;  
      }  
  

  1 works the same.
• Don't forget the semicolon!

How to Stop Background Repeat

When you apply a background image to an element, by default it will repeat itself.

If the image is smaller than the tag of which it's the background, it will repeat in order to fill in the tag.

How do we stop this from happening?

The

section {
    background-repeat: repeat-y;
        }

2 property takes in 4 values and we are able to change the direction in which the image repeats, or stop the image from repeating itself all together.

section {
    background-repeat: repeat;
        }

This is the default value if we don't give the

section {
    background-repeat: repeat-y;
        }

2 property a value. In this case the image is repeated both horizontally and vertically so in both x-direction and y-direction respectively until it fills the space.

section {
    background-repeat: no-repeat;
        }

The

section {
    background-repeat: repeat-y;
        }

4 value stops the image from repeating itself from all directions. The image is only shown once.

section {
    background-repeat: repeat-y;
        }

This value repeats the image only horizontally on the page. The image is repeated across the page, in the

section {
    background-repeat: repeat-y;
        }

5. The

section {
    background-repeat: repeat-y;
        }

5 in math is from the left to the right.

section {
    background-repeat: repeat-y;
        }

This value repeats the image only vertically on the page. The image is repeated down the page ,in the

section {
    background-repeat: repeat-y;
        }

7. The

section {
    background-repeat: repeat-y;
        }

7 in math is from top to bottom.

How to Set Background Position

After adding a background image and stopping it from repeating, we are able to further control how it looks within the background of the tag by improving its position.

We'll use the

section {
    background-repeat: repeat-y;
        }

9 property to do this.

The selector takes in two values. The first one is for the horizontal position, or x-direction (how far across the tag). The second one is for the vertical position, or y-direction (how far down the tag).

The values can be units, like a pair of pixels:

section {
    background-position: 20px 30px;
        }

This will move the image 20px across and 30px down the containing tag.

Instead of pixels we can use a set of keywords like right, left, top, down, or center to place the image at the right, left, top, down, or center of the tag.

section {
    background-position: right center;
        }

This places the image at the right hand side of the center of the tag.

If we wanted to center it both horizontally and vertically, we would do the following:

section {
    background-position: center center;
        }

To position an image with finer detail, it is worth mentioning that we can use percentages.

section {
    background-position: 20% 40%;
        }

This positions the image 20% across the tag and 40% down the tag.

So far we have seen values used in combination, but we can also just specify one value like

section {
    background-repeat: repeat-y;
        }

0 or

section {
    background-repeat: repeat-y;
        }

1 or

section {
    background-repeat: repeat-y;
        }

2, which applies it to both directions.

How to Resize a Background Image

To control the size of the background image we can use the background-size property.

Again, like the previous properties mentioned, it takes in two values. One for the horizontal (x) size and one for the vertical (y) size.

We can use pixels, like so:

section {
    background-size: 20px 40px;
    /* sizes the image 20px across and 40px down the page */
        }

If we do not know the exact width of the container we are storing the image in, there is a set of specific values we can give the property.

• section {

  background-repeat: repeat-y;  
      }  
  

  3 resizes the background image so it covers up the whole tag's background space no matter the width of the tag. If the image is too big and has a larger ratio to the tag it is in, this means the image will get stretched and therefore cropped at its edges.
• section {

  background-repeat: repeat-y;  
      }  
  

  4 contains the image, as the name suggests. It will make sure the whole image is shown in the background without cropping out any of it. If the image is much smaller than the tag there will be space left empty which will make it repeat to fill it up, so we can use the

  section {

  background-repeat: repeat-y;  
      }  
  

  5 rule we mentioned earlier.

The rule

section {
    background-repeat: repeat-y;
        }

6 in this case will crop of parts of the image

When we change it to

section {
    background-repeat: repeat-y;
        }

7 we see that the image shrinks to fit the section tag.

How to Use the Background Attachment Property

With the

section {
    background-repeat: repeat-y;
        }

8 property we can control where the background image is attached, meaning if the image is fixed or not to the browser.

The default value is

section {
    background-repeat: repeat-y;
        }

9, where the background image stays with its tag and follows the natural flow of the page by scrolling up and down as we scroll up and down.

The second value the property can have is

section {
    background-position: 20px 30px;
        }

0. This makes the background image stay in the same postion, fixed to the page and fixed on the browser's viewport. This creates a parallax effect which you can see an example of here:

See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.

Background Gradients

A different use case for the

section {
    background-repeat: repeat;
        }

9 property is for telling the browser to create a gradient.

The

section {
    background-repeat: repeat;
        }

9 in this case does not have a URL, but a linear-gradient instead.

The simplest way to do this is to specify the angle. This controls the direction of the gradient and how to colors will blend. Lastly add two colors that you want blended together in a gradient for the tag's background.

A gradient that goes from top to bottom and from black to white is:

section {
    background-repeat: repeat;
        }

0

The most common degrees used for gradients are:

• section {

  background-position: 20px 30px;  
      }  
  

  3 from top to bottom
• section {

  background-position: 20px 30px;  
      }  
  

  4 from left to right
• section {

  background-position: 20px 30px;  
      }  
  

  5 from bottom to top
• section {

  background-position: 20px 30px;  
      }  
  

  6 from right to left

The above degrees each correspond with

section {
    background-position: 20px 30px;
        }

7,

section {
    background-position: 20px 30px;
        }

8,

section {
    background-position: 20px 30px;
        }

9 and

section {
    background-position: right center;
        }

0, respectively.

section {
    background-repeat: repeat;
        }

1

See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.

Instead of keyword colors we can use hex colors to be more particular and have a wider range of options:

section {
    background-repeat: repeat;
        }

2

See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.

We can also include more than two colors in a gradient, creating different affects and color schemes.

Conclusion

This marks the end of our introduction to the basic syntax of the

section {
    background-repeat: repeat;
        }

9 property.

From here the possibilities are endless and leave room for a lot of creative expression. These effects help the user have a pleasant experience when visiting your website.

I hope this was helpful, and thank you for reading.

Have fun with your designs and happy coding!

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

What does background no

background-repeat repeat-x: The image is repeated horizontally only. repeat-y: The image is repeated vertically only. no-repeat: The image is not repeated: only one copy of the image is drawn.

How do I fix the background image in CSS without repeating?

If you want the background image not to repeat at all, use background-repeat: no-repeat; .

Which is the default value for background

Property Values.

How do you repeat an image in CSS?

CSS Background Image Repeat.

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

body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; ... .

Show the background image only once: body { background-image: url("img_tree.png"); ... .

Position the background image in the top-right corner: body {.