Jump to content

Бэкграунд на def стиле

Featured Replies

Posted
comment_178256

Всех приветствую, и всех причастных с праздником. пытался разобраться сам, но видать не доходит, вообщем хочу сделать бэкграунд на default стиле, но чтобы его визуальные и фактические границы не выходили за красные зоны (см. рис.) пытался сделать сам, но он почему-то заходит на header, вообще это нужно чтобы сделать плавный переход от цветного изображения в чб

Без имени-2.png

@bon1 @ZIKURIK вы в css спецы, подскажите пожалуйста

  • Author
comment_178293
5 часов назад, ZIKURIK сказал:

Ничего не понял, но фон который на скриншоте ты выделил красным меняется в настройках

да все верно, меняется но он уходит под шапку, чего мне не надо, я хочу чтобы он остался в этой области(красной) и чтобы при наведение на header он(бэкграунд) становился черно-белым 

и я хочу туда картинку закинуть

  • Author
comment_178297
7 минут назад, by_ix сказал:

1-15604-256b.png

мда, ОПИСЫВАТЬ ситуацию конечно не мое :D  Все таки я за то чтобы Респектед создал дискорд :D 

если у кого-то есть возможность, я бы в дискорде объяснил 

comment_178334
1 час назад, cyr4x сказал:

да все верно, меняется но он уходит под шапку, чего мне не надо, я хочу чтобы он остался в этой области(красной) и чтобы при наведение на header он(бэкграунд) становился черно-белым 

и я хочу туда картинку закинуть

В globalTemplate перед тегом:

<main id='ipsLayout_body' class='ipsLayout_container'>

вставить:

<div class='body_background'></div>

Это в custom.css:

.body_background {
    position: relative;
    width: 100%;
}
.body_background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1080px;
    width: 100%;
    background-image: linear-gradient(0deg, rgb( var(--theme-page_background) ) 10%, transparent), url('IMAGE_URL');
    background-repeat: no-repeat;
    transition: filter 1s ease;
}
#ipsLayout_header:hover + .body_background:before {
    filter: grayscale(1);
}

height - высота изображение
IMAGE_URL - ссылка на изображение

comment_178366

Ну или так:

Находишь данный код globalTemplate

<main id='ipsLayout_body' class='ipsLayout_container'>

и меняешь на это:

<main id='ipsLayout_body' class='ipsLayout_container background_ms'>

в CSS кидаешь код:

.background_ms {
background: white; /* Цвет фона */
    padding: 5px;
    margin-top: 71px; /* Отступ от header */
}

 

  • Author
comment_178436
В 23.02.2022 в 23:08, ZIKURIK сказал:

В globalTemplate перед тегом:

<main id='ipsLayout_body' class='ipsLayout_container'>

вставить:

<div class='body_background'></div>

Это в custom.css:

.body_background {
    position: relative;
    width: 100%;
}
.body_background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1080px;
    width: 100%;
    background-image: linear-gradient(0deg, rgb( var(--theme-page_background) ) 10%, transparent), url('IMAGE_URL');
    background-repeat: no-repeat;
    transition: filter 1s ease;
}
#ipsLayout_header:hover + .body_background:before {
    filter: grayscale(1);
}

height - высота изображение
IMAGE_URL - ссылка на изображение

чет ничего не получилось image.thumb.png.791d53a59fded34c3dd818a9a9af9aed.png

comment_178440
2 минуты назад, cyr4x сказал:

где? mp-info.su не работает 

код в инспекторе работает у тебя на сайте, значит что-то не так делаешь

  • Author
comment_178441
7 минут назад, ZIKURIK сказал:

код в инспекторе работает у тебя на сайте, значит что-то не так делаешь

может в лс? 

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.