Gradient overlaying Animated-SVG fails, SVG also 'too big' for site

HTML & CSS
1

Goodday explorer of the internet!
I am a student Graphic Designer, and I am struggling with the following:
My website has 3 rotating circles (svg), on top of an background.
I want the background to shine abit trough the top and bottom of the site, so I made a copy of the background wihere the middle part is removed, so I could put it on top of the rotating images.
Sadly, this doesn’t work and the svg seems to take priority over the background.

My second problem is when the circles rotates, one of the corners is going outside the division, which makes it possible to scroll sideways on a part where it shouldn’t happen.

I searched for a while and I couldn’t find a clear answer, thats why I registered here in hope anyone here could help me ^^’

2

1920×1080 170 KB

Basically, the 2 outer cirles form no problem, only the middle one which has to rotate atleast 60 degrees until its possible to reset.

3

We would need to see a working example of your code to diagnose the problem.

4 
<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Chiwii</title>
		<link rel="stylesheet" type="text/css" href="Chiwii.css">
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
	</head>
	
	<body>
		<div id="main">
				<div class="gradient1">
					<img src="images/Background-Top/Background-Top-FullHD-gradient.png">
				</div>
			<div id="top">
				<h1 class="chiwii1">CHIWII</h1>
				<h1 class="chiwii2">Discover the imagination of 2 friends</h1>
				<hr size="2px" color="#FFFFFF" class="hr1">
				<img src="svg/rotatiting-circle/rllines.svg" class="rloutside">
				<img src="svg/rotatiting-circle/rlborder.svg" class="rlinside">
				<img src="svg/rotatiting-circle/rlborder2.svg" class="rlborder">
				<img src="svg/drop-down.svg" class="dropdown">
				
			</div>
		</div>
	</body>
</html>

@charset "utf-8";
/* created by Laurens Baatsen */

/* Fonts */
@font-face {font-family:Helv; src: url(fonts/Helvetica.otf)}
@font-face {font-family:Hips; src: url(fonts/Hipstelvetica.ttf)}

/* Divisions */
#main {
    width:1920px;
	height: auto;
	margin:-101px 0px 0px -8px;
}
#top	{
	margin-top: -1100px;
	background: url(images/Background-Top/Background-Top-FullHD.png);
	width: 1920px;
	height: 1000px;

}

/* HTML */
body 	{
	background: #fff
}

/* Classes */
.dropdown	{
	height: 32px;
	width: 32px;
	margin-top: 400px;
}
.stretch {
    width:100%;
    height:100%;
}
.chiwii1	{
	color: #FFFFFF;
	font-family: Hips;
	font-size: 150px;
	text-align: center;
	letter-spacing: 45px;
	text-align: center;
	vertical-align: middle;
	line-height: 900px;   
	margin-left: 23px;
}
.chiwii2	{
	color: #FFFFFF;
	font-family: Helv;
	font-size: 35px;
	text-align: center;
	letter-spacing: 20px;
	text-align: center;
	vertical-align: middle;
	margin-top:-375px;
}
.hr1	{
	margin-top: -115px;
	width: 800px;
}
hr:before {
	position: absolute;
	content:url(svg/square.svg);
	width: 16px;
	margin: -8px 0px 0px -16px;
}
hr:after 	{
	position: absolute;
	content:url(svg/square.svg);
	width: 16px;
	margin: -8px 0px 0px 800px;
}

/* Keyframes */
@keyframes rloutside { 100% { -webkit-transform: rotate(-1deg); transform:rotate(-1deg); } }
@keyframes rlinside { 100% { -webkit-transform: rotate(60deg); transform:rotate(60deg); } }
@keyframes rlborder { 100% { -webkit-transform: rotate(5deg); transform:rotate(5deg); } }

.rlinside	{
	top:-325px;
	left:60px;
    position: absolute;
    width: 1800px;
    height: 1800px;
    animation:rlinside 7.2s linear infinite;
}
.rloutside	{
	top:-325px;
	left:60px;
	position: absolute;
    width: 1800px;
    height: 1800px;
    animation:rloutside 0.64s linear infinite;
}
.rlborder	{
	top:-325px;
	left:60px;
	position: absolute;
    width: 1800px;
    height: 1800px;
    animation:rlborder 4.4s linear infinite;
}

Excuses for not posting this first, I totally forgot it for some reason…
Do the files also need to be included? As in pictures and such?

5

The ‘image goes out of the site’ thing is fixed, simply with overflow:hidden;

Only getting the picture overlapping those 3 svg’s is the problem right now

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.