Этот вариант вставляет картинку в центр страницы
<body>
<div class="container">
<div class="row" id="content">
***
</div>
</div>
</body>
.container {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Вместо этой картинки я хочу вставить на основе css3 движущийся элемент, вот такой:
#loading {
border:15px solid #fff;
border-top:15px solid #FF6600;
border-radius:50%;
width:50px;
height:50px;
animation:spin 1s linear infinite;
display:block;
margin:0 auto;
left:49%;
position:absolute;
top:50%;
}
@keyframes spin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
Для этого в html мне нужно добавить новый div, вот так:
<body>
<div class="container"><div id="loading"></div>
<div class="row" id="content">
***
</div>
</div>
</body>
Вопрос, можно ли как-то вставить этот новый движущийся css элемент без добавления тега <div id="loading"></div>. То есть как в первом варианте прямо в container? Если я в css заменяю #loading на .container в css у меня весь контент крутится.