Как спозиционировать облако и его текст

#html #css #svg

Подскажите, как правильно задать позиционирование и остальные настройки, чтобы было
как на изображении?



.container {
  width: 1230px;
  margin: 0 auto;
}

.main {
  background-image: url(../img/home.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

.wrapper__sky {
  margin-top: 28px;
}

.wrapper__sky__txt {
  position: relative;
}

.wrapper__sky__txt p {
  font-weight: bold;
  font-size: 22px;
  color: #2f1059;
}

.wrapper__sky__txt span {
  font-family: 'Arial', sans-serif;
  font-weight: lighter;
  font-size: 22px;
  color: #2f1059;
}

  

  

    

      
      

        
Дом готов, идёт внутренняя отделка. Срок сдачи: Февраль 2016
      
    
  






    

Ответы

Ответ 1

Облака сделал в формате svg, добавил к ним радиальный градиент.
Текст тоже находится внутри файла SVG.
Осталось добавить картинку внутрь файла svg и тогда всё будет вместе
в одной системе координат и не будет разъезжаться друг относительно
друга при изменении масштаба.


Добавление картинки внутрь svg файла:    






  


Поверх картинки накладываются облака с градиентом. 


Добавляется текст, при этом всегда есть возможность позиционировать текст, менять
цвет и величину букв.   


    
      ВАША КВАРТИРА В НОВОСТРОЕ ЖДЁТ ВАС
    
  


Ниже полный код банера:    






Ответ 2

Можно сделать с помощью позиционирования:



* {
  margin: 0;
  padding: 0;
}

body {
  background: url("https://i.stack.imgur.com/mWkGU.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.wrapper {
  text-align: center;
  color: #000;
  position: relative;
}

.item {
  position: absolute;
  left: 0;
  right: 0;
  padding: 50px;
}

.item:first-child {
  background: url("https://image.ibb.co/mfFr87/11310145.png")50% 50% no-repeat;
  z-index: 1;
}

.item:nth-child(2) {
  top: 40px;
  background: url("https://image.ibb.co/gozjT7/11310145.png")50% 35% no-repeat;
}

.item:last-child {
  top: 80px;
  background: url("https://image.ibb.co/mfFr87/11310145.png")50% 50% no-repeat;
}

  

    
LOREM
  
  

    
Lorem Ispum Dolor
  
  

    
IPSUM
  



Ответ 3

Пример с анимацией

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

Для этого лучше всего подойдёт команда smil transform="scale(n)" 

Реализация  команды анимации scale(n): 

,    


где -      values="1;2;2;2;1;1;1"  набор коэффициентов увеличения. 

Паузы между увеличением и уменьшением достигаются повторением одинаковых цифр  

repeatCount="3" - количество повторений полных циклов анимации