How to work with wallpapers in CSS

5a7ebc0e503a0a9e8d80a72a5187afa1

It’s no secret that pictures are an integral part of any site, whether a small one-sided or a large Internet portal. They are embedded using CSS styles, as well as directly through HTML.

In this article, we will analyze in detail the work with wallpapers on the site using CSS, as well as a little touch on HTML.

Working with the background in CSS

To add a background image to a site, CSS uses the background property. With its help you can not just download a picture, but also set it position, repeatability, fixation and more.

In this section, we will look at all the possible values ​​that you may encounter when working with images.

background-color

This feature is not suitable for uploading your own photo, but will help you change the background color of any item. This can be useful when you need to fill a single block or an entire page with color.

We can apply a property, for example, to a tag . In this case, the background of the entire page will change. We can do this right inside the HTML code with a tag added

or directly in CSS. I’ll go the second way, pre-connecting CSS to HTML with a string where href is the CSS location address. In my case, it is in the same folder as the HTML, so I immediately specify the file name.

So, having connected CSS, we register the code:


body{

            background-color: yellow;

}

For clarity, I also added small text to the HTML. The code looks like this:


<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <link rel="stylesheet" href="main.css">

            <title>Document</title>

</head>

<body>

            <p>

                        Hello!

            </p>

</body>

</html>

Thus we get the following page:

How to change the background color of a page using CSS

In the future, I will not show HTML code, we will focus only on CSS.

background image

You can use this property to load a background image. We can apply it to the whole page or to a single block. If you do not want the image to occupy the entire area of ​​the page, then add an HTML string

, where class is any name. We will need a class so that we can access it through styles.

Here’s how I refer to this class in CSS:


.img{

            background-image: url("alondra-lucia--_os35-xQjc-unsplash.jpg");

            background-size: no-repeat;

            background-position: center;

            background-size: cover;

            height: 400px;

            width: 400px;

}

I added extra lines to make the final image look complete. Now I will explain everything briefly, a little later we will return to this.

  1. In the first line, I specify a key property that I use to add a background image to the img class, a small block on the site. In parentheses indicate its address. Since the picture is in that directory, only its name is registered.
  2. In the second line, I make sure that the image is not repeated.
  3. In the third I make so that the picture was in the center.
  4. The fourth line scales the image as much as possible while maintaining the proportions of the image.
  5. Lines 5 and 6 are needed to set the height and width of the block. Without this, we simply will not see the attached picture.

As a result, I get the following:

How to add a picture to a site using CSS

background-repeat

If you add this property, the image will be repeated.

It can have several meanings:

  • background-repeat: repeat-x – horizontal repetition;
  • background-repeat: repeat-y – vertical repetition;
  • background-repeat: repeat – repetition both horizontally and vertically;
  • background-repeat: no-repeat – the image does not repeat.

For example, use the first line and make the image repeat horizontally throughout the page:


body{

            background-image: url("alondra-lucia--_os35-xQjc-unsplash.jpg");

            background-repeat: repeat-x;

            background-position: center;

            background-size: 20%;

}

Note that I also added a “background-size” property – with it I made the size of the photo 80% smaller so that the image does not spread to the entire screen.

How to replicate an image using CSS

background attachment

This property determines the fixation of the background image when scrolling:

  • background-attachment: scroll – the background scrolls along with the page;
  • background-attachment: fixed – the background remains stationary.

background position

I have already used this property above, let’s take a closer look at it now, because there are a few more nuances. Background-position determines the location of the background image relative to the screen. The value of a property is a set of vertical and horizontal coordinates, the count of which starts from the upper left corner.

The property can be specified in percentage format, pixels, centimeters or verbally: top, bottom, center, right, left.

Example:

  • background position: 50% 15%; – The image is located in the center horizontally and 15% recedes from the top;
  • background position: 25px 17px; – Indent the image down by 25 pixels from the top edge and 17 pixels to the right of the left.

linear-gradient

If you want to load a gradient (smooth transition from one color to another) on your page, you do not have to use a ready-made image. This effect can be created using the linear-gradient property.

Here is an example:


.img{

            background: linear-gradient(to top, #2639fa, #c9d1ff);

            width: 400px;

            height: 400px;

}

The first line indicates where the gradient will start. In this case – from the bottom up. You can also specify the values ​​to top, to bottom and to left.

On the page it looks like this:

How to use CSS to add a gradient to a site

background-size

The background-size property will help you resize the image.

Absolute units such as px, em, cm and others can be used as background-size.


background-size: ширина высота;

By default, the width and height are set to auto, which leaves the original image size.

For example, you uploaded a 200 × 200 px image to your site, but for some reason you need to enlarge it to 400 × 400 px. This is what the background-size settings will look like:


background-size: 400px 400px;

Only one value can be specified, and this will be considered width. Then the height will be as auto and the proportions of the picture will be saved:


background-size: 400px;

We can also specify the value of contain – in this case, the background image is scaled so that it completely fills the block or the entire page.


background-size: contain;

The community is now in the Telegram

Subscribe and stay up to date with the latest IT news

Sign up

Alternate text

If the user has the image download mode turned off, he will see a red cross or another icon instead of the image – it depends on the browser. To avoid this, we can suggest, describe what is shown in the picture. To do this, use the alt parameter, which is written to the tag in an HTML file. We haven’t talked about it yet, but there’s nothing complicated about it. The image is loaded similarly to what we did when using the background-image property.

Thus, if we want to add a picture to the body, we must prescribe the following lines of code:


<body>

            <img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">

</body>

It’s also worth mentioning that the alt option allows search engines to display your photo. If the user google “Breakfast”, the search engine photos will be your picture.

Image as a link

Through HTML code, we can also make the image clickable. This will be useful when you add a social network icon and want the user to click on the social network page.

To do this, you must add a tag in the code where href is a link to the page. You must add an image inside this tag.

The result should be:


<body>

            <a href="vk.com"></a>

            <img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">

</body>

Create a translucent background in CSS

On sites, translucency is achieved through the opacity property or RGBA color format set for the background. Using this option will help make the text more readable in the background image.

For example, to make an image 50% dimmer, you need to specify the following in CSS:


opacity: 0.5;

How to change the transparency of the background image using CSS

The value of opacity is written to the class as we did with other properties.

Instead of imprisonment

Using a background image on the site helps to dilute the text content, as well as show live examples to the user what he is dealing with. In this article, we looked at the main ways to add images using HTML and CSS. Just use one background-image property or tag and the image is displayed on the page.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2022 ZoNa365.ru - Theme by WPEnjoy · Powered by WordPress