Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
23 / 22 / 17
Регистрация: 06.05.2016
Сообщений: 260
1

Как сделать такой фон?

15.03.2017, 15:09. Показов 1590. Ответов 4
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Добрый день уважаемые. Подскажите пожалуйста какие свойства надо задавать что б получить такой фон как на картинке? Фон взят с сайта https://www.spotify.com/us/
Не понимаю, я прописываю
CSS
1
2
3
4
5
6
7

.block-jumbotron{
position: fixed; /* Вообще исчезает*/
width: 100%;
height: 500px;
box-sizing: border-box;
background: rgba(255, 0, 0, 0.3) url("../img/jumbotron/bg-albums.png") 50% 50% repeat; /* не понимаю как автор градиентную заливку засунул поверх фото*/
}
Миниатюры
Как сделать такой фон?   Как сделать такой фон?  
0
Лучшие ответы (1)
Сообщение: #10218125
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 15.03.2017, 15:09
Ответы с готовыми решениями:

Как сделать такой фон????
на этом сайте на фоне стоит картинка которая распологаеься по центру вне зависимости от разрешения...

Как сделать такой задний фон? (CSS)
Как сделать задний фон как на фото через css, то-есть, что бы цвет был голубым, но шли диагональные...

Нужно сделать такой фон (Полоску фона (адаптивного) как на Рамблере про олимпиаду)
Привет. Нужно сделать такую полоску фона (адаптивного) как на Рамблере про олимпиаду...

Как правильно сверстать такой фон?
Верстаю макет (учебный). Как правильно добавить градиентный фон в области которую выделил на первой...

4
Эксперт JSЭксперт HTML/CSS
3826 / 2676 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
15.03.2017, 15:58 2
Лучший ответ Сообщение было отмечено Black_Star как решение

Решение

Указываете фоны через запятую.
CSS
1

background: linenar-gradient ... ,url() ... ;
1
23 / 22 / 17
Регистрация: 06.05.2016
Сообщений: 260
15.03.2017, 16:50  [ТС] 3
Спасибо,дошло.
А можешь ещё подсказать как правильно задать стили что б не резало (ну и фотки адаптивные были) ?
Вот пример
http://codepen.io/anon/pen/VpMvxb

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<div class=" block-jumbotron container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="jumbotron-textBox">
                    <h2 class="jumbotron-textBox__mainPhrathe text-white">It's easy</h2>
                    <h3 class="jumbotron-textBox__article  text-lightblue">Search</h3>
                    <p class="jumbotron-textBox__simpleText text-white">Know what you want to listen to? Just search and
                        hit play.</p>
                    <h3 class="jumbotron-textBox__article  text-lightblue">Browse</h3>
                    <p class="jumbotron-textBox__simpleText text-white">Check out the latest charts, brand new releases
                        and great playlists for right now.</p>
                    <h3 class="jumbotron-textBox__article  text-lightblue">Discover</h3>
                    <p class="jumbotron-textBox__simpleText text-white">Enjoy new music every Monday with your own
                        personal playlist. Or sit back and enjoy Radio.</p>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="jumbotron-images">
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="jumbotron-images__iphone iphone1"><img class="iphone-block__img" src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/mobilePhones/iphone-1a.jpg?raw=true" alt="iphone"></div>
                        </div>
                        <div class="col-xs-4">
                            <div class="jumbotron-images__iphone iphone2"><img class="iphone-block__img" src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/mobilePhones/iphone-2.jpg?raw=true" alt="iphone"></div>
                            <div class="jumbotron-images__iphone iphone3"><img class="iphone-block__img" src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/mobilePhones/iphone-3.jpg?raw=true" alt="iphone"></div>
                        </div>
                        <div class="col-xs-4">
                            <div class="jumbotron-images__iphone iphone4"><img class="iphone-block__img" src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/mobilePhones/iphone-4.jpg?raw=true" alt="iphone"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

.block-jumbotron{
    position: relative;
    width: 100%;
    height: 650px;
    margin-top: 3%;
    box-sizing: border-box;
    background:  url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/mobilePhones/bg-albums.png?raw=true"), linear-gradient(-130deg, #8628b5 30%, #ED1E79) 50% 50% repeat;
    background-attachment: fixed;
    font-family: Circular,Helvetica,Arial,sans-serif;
 
}
 
.text-white{
    color: #fff;
}
.text-lightblue{
    color: #9bf0e1;
}
 
.jumbotron-textBox__mainPhrathe{
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 0 0 .75em;
    margin-top: 2em;
}
.jumbotron-textBox__article{
    margin-top: 24px;
    margin-bottom: 12px;
 
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.04em;
}
 
.jumbotron-images{
 
    width: 100%;
    height: 100%;
    border: 1px solid yellow;
    transform: rotate(30deg);
}
 
 
 
.jumbotron-images__iphone{
    /*width: 179px;*/
    min-height: 365px;
 
    padding: 40px 11px 0;
    margin-bottom: 15px;
    background: url("https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/mobilePhones/iphone-klein-purple.png?raw=true") no-repeat;
    background-size: cover;
}
 
 
.iphone-block__img{
    display: block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
 
.iphone1, .iphone4{
    margin-top: 50%;
}
0
84 / 81 / 42
Регистрация: 20.01.2017
Сообщений: 219
15.03.2017, 17:40 4
по-моему, лучше всего, все телефоны сделать одной картинкой (если владеете фотошопом) и запилить её в background
0
23 / 22 / 17
Регистрация: 06.05.2016
Сообщений: 260
15.03.2017, 17:57  [ТС] 5
Владею, но тут такое не прокатит.
0
15.03.2017, 17:57
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 15.03.2017, 17:57
Помогаю со студенческими работами здесь

как задать такой фон страницы?
может я торможу, но ребят, подскажите как задать такой фон страницы: как наложить градиент на...

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Как сделать фон
Подскажите как мне сделать фон внизу, если вверху у меня картинка с коллажами, а высота сайты...

Можно ли точно наложить картинку на такой же фон?
Есть две картинки img1 and img2 одного размера. 1) Можно ли задать каринке img1 фон=img2. 2)...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru