How do you customize background images?

A

Artem00712018-03-17 18:20:13

css

Artem0071, 2018-03-17 18:20:13

Here is the following image:

How to make it the background and center it relative to the screen width?
Obviously, when the screen is wide, then the image is full width, but when the screen gets smaller and smaller, how to make sure that this same cupcake does not climb out of the screen?
And it is desirable, of course, to do this on pure css, but something tells me that js will be needed here
=============================== =================================
PS. Here, of course, this is not very noticeable, but I meant the images are wider and where a certain object is far from the center

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladislav, 2018-03-20
@Artem0071

Well, firstly)
It all depends where you want to insert the background image, that is, it can be, for example, some kind of block or header. Now I'll tell you on the example of header

<body>
    <header>
        <!--Всё что находится внутри-->
    </header
</body

header {
    background: url(/*Путь к фото*/) no-repeat center top / cover;
}

And now let's figure out what's what :)
no-repeat - You can see from the name that it was created so that the photo would not be repeated
center top - These are placements in X and Y (where center is X, and top is Y) I think what is center, and what is top is not necessary to write.
cover - Makes something for whatever the screen (its dimensions) is, it will always be full width.