Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
IrenaIT
27 / 0 / 1
Регистрация: 01.06.2017
Сообщений: 70
1

Адаптивный блок с фоновым рисунком

12.02.2020, 19:28. Просмотров 202. Ответов 2
Метки нет (Все метки)

Необходимо сделать блок с текстом и фоновым рисунком....Чтобы блок был адаптивным..Ничего не получается(
Находится вот по этому адресу : http://irenaterra.dn.ua/
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
<!doctype html>
<html lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Required meta tags -->
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
    <script src="https://kit.fontawesome.com/9f92ecc5b2.js" crossorigin="anonymous"></script>
    <!-- Наш файл стилей -->
    <link rel="stylesheet" href="css/popup.css">
    <title>pop-up</title>
  </head>
  <body>
     <div class="container">
    <div class="popup">
        <div class="text">
            <span class= "t1" ><i class="far fa-heart"></i> Vi fejrer Valentines! <i class="far fa-heart"></i></span><br/>
            <span class= "t2" ><span style="text-transform:uppercase;">Spar</span> 10% på alle events</span><br/>
            <span class= "t3" >indtil 31 Marts</span><br/>
            <span class= "t4">Rabat kode</span> <br/>
        </div>
        <img src="img/close.png" alt="close">   
    </div>
    </div>
    
  </body>
</html>


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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
body {
    font-family: 'Montserrat', sans-serif;
    color:#ffffff;
    padding:0;
    margin:0;
}
div, p, a, img,button{
    box-sizing:border-box;
}
p, a, img, h1, h2, h3, h4 {
    padding:0;
    margin:0;
}
img{
    max-width:100%;
    height:auto;
}
a{
    text-decoration:none;
}
 
.t1{
    font-size:24px;
    font-weight:600;
}
.t2{
    font-size:32px;
    font-weight:700;
}
.t3{
    font-size:27px;
    font-weight:600;
}
.t4{
    font-size:24px;
    font-weight:500;
}
 
.popup{
    width: 460px;
    height:280px;
    background-image: url("../img/bg_image.png"); 
 
    text-align:center;
    display: table-cell;
    vertical-align: middle;
    position:relative;
    margin:0;
}
.popup img {
    width: 24px;
    height: 24px;
    position:absolute;
    top: 15px; /* Положение от верхнего края */
    right: 15px; /* Положение от правого края */
}
.text{
    line-height: 48px;
    text-shadow: 2px 2px 20px #ff4ea8;
}
 
 
/* Медиа-запросы */
@media (max-width: 767.98px){
.popup{
    height:200px;
    background-image: url("../img/bg_image.png") no-repeat center center;
    background-size: cover;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
    position:relative;
}
.text{
    line-height: 35px;
}
.t1{
    font-size:18px;
}
.t2{
    font-size:22px;
}
.t3{
    font-size:18px;
}
.t4{
    font-size:16px;
}
.popup img {
    width: 15px;
    height: 15px;
    position:absolute;
    top: 10px; /* Положение от верхнего края */
    right: 10px; /* Положение от правого края */
}
}
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.02.2020, 19:28
Ответы с готовыми решениями:

Адаптивный Блок
Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в...

адаптивный блок
Здравствуйте.У меня на сайте есть меню(в нём личный кабинет,рубрики,контакты и т.д) расположенное...

Адаптивный блок с картинкой
Подскажите, как сделать адаптивный блок с рамкой, внутри слева картинка, справа от картинки текст с...

Адаптивный блок в сайдбаре
Здравствуйте. Есть адаптивный шаблон на Wordpress, в который я через виджет в сайдбаре установил...

Адаптивный блок фиксированной ширины
Всем привет! Есть блок фиксированной ширины, например 300px. блок центрирован по горизонтали. ...

2
Programmer-Web
2 / 2 / 0
Регистрация: 15.12.2019
Сообщений: 63
13.02.2020, 10:26 2
Почитай про @media
http://htmlbook.ru/css/value/media
https://html5book.ru/adaptivnaya-vyorstka-sayta/
https://tproger.ru/translations/responsive-web-design-tips/
Полезная вещь при адаптивной верстке
1
Piga
3 / 3 / 0
Регистрация: 07.05.2019
Сообщений: 12
19.02.2020, 13:28 3
Есть несколько вариантов первый:
HTML5
1
2
3
<div style="position:releative;width:x%;background-image:url(...);background-size:cover;">
     <p style="position:absolute;top:x%;left:x%;">Text</p>
</div>
Второй пользоваться медиа запросами как описали выше. Или вообще пользоваться фреймворком Bootstrap там есть класс img-responsive для 3 версии и img-fluid для 4.
Или просто приписать изображению такие свойства:
HTML5
1
<img style="width:x%;height:auto;max-width:100%"></img>
1
19.02.2020, 13:28
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.02.2020, 13:28

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Адаптивный блок с изображением и текстом
Здравствуйте. Проблема: Есть блок, который должен быть равен ширине контента, внутри него...

Не устанавливаются картинки фоновым рисунком
после некоректного завершения работы,больше не ставятся картинки фоновым рисунком,пишет о какой-то...

Сделать картинку фоновым рисунком
Как зделать картинку фоновим рисунком? (в виведеном окне,при нажатии правой кнопки миши по...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.