2

Пытаюсь сделать фон из нескольких gif-картинок. Хотелось бы чтобы и справа была гифка и слева, и соответственно так же вверху и внизу. Делаю так на странице, пока получилось по центру одну влепить. Может знаете как это правильно реализовать.

<head>      
        <meta charset="utf-8">
        <title>С Днюхой !!!</title>   
        <link href="tipaStili.css" rel="stylesheet">    
        <style>
            html {
            height: 100%; 
            background: #000 url(2.gif) 
            no-repeat center;   
            }
        </style>
</head>

получаеться вот такое введите сюда описание изображения

4
  • Вам нужно использовать свойства: position, left, right, top, bottom. Справка - тут w3schools.com
    – nick_n_a
    12 июн 2019 в 7:19
  • @nick_n_a я не могу в свой код еще добавить gif-ок, только одна отображается, может у вас есть пример какой нибудь?
    – Sorpok
    12 июн 2019 в 7:21
  • Фон может быть один. Не знаю можно ли "скомбинировать". Расставьте img или div задайте им например position:float right:0px;width:ширина картинки и т д. Поддерживают ли браузеры прозрачность - png - да. gif - нет.
    – nick_n_a
    12 июн 2019 в 7:22
  • Ну да, так фейерверки залазят за gif-ки, спасибо за помощь, оставлю одну по центру.
    – Sorpok
    12 июн 2019 в 7:45

1 ответ 1

2

С помощью background-position можно поменять расположение. Загуглите, чтобы узнать подробней. Можете также добавить это в в ваш background. Чтобы сделать 4 штуки, можете попробовать так:

<head>      
        <meta charset="utf-8">
        <title>С Днюхой !!!</title>   
        <link href="tipaStili.css" rel="stylesheet">    
        <style>
            html {
            height: 100%; 
            background: 
            #000 url(1.gif) no-repeat top left,
            #000 url(2.gif) no-repeat top right,
            #000 url(3.gif) no-repeat bottom left,
            #000 url(4.gif) no-repeat bottom right;
            }
        </style>
</head>

Плюсом можете редактировать ширину и высоту индивидуально. Вместо top, left и т.д. можете использовать проценты, пиксели, и т.д.

5
  • хм, так гифок вообще нет.
    – Sorpok
    12 июн 2019 в 8:23
  • Адрес гифок поменяли, я надеюсь, на нужные?
    – IT Cat
    13 июн 2019 в 3:42
  • Да. Ну они у меня там же где и первая, так что адрес такой же, просто переименовал гифки с 1-4
    – Sorpok
    13 июн 2019 в 5:30
  • width: 100% должно помочь. А вот высоту было необязательно указывать.
    – IT Cat
    13 июн 2019 в 6:28
  • + может лучше это всё применить для body вместо html? Для html сделайте width: 100%, в остальном всё, эти стили указываете для body вместо html.
    – IT Cat
    13 июн 2019 в 6:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.