Here is the link of how it looks currently:
http://cubicfoundations.com
What I am trying to achieve:
The gradient div acts as a background. The SVG image (logo div) overlays the gradient div with a full-width-and-height white background, showing the gradient colors through the transparent parts of the logo.
How do I achieve this?
I am also unable to assign a 100% height to the gradient div - it seems to only work on a fixed px basis?
Any fixes/ideas greatly appreciated!
The HTML is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cubic Foundations</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="gradient" />
<div id="logo" />
</body>
</html>
The CSS' path is css/style.css
body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}
#gradient {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
position: absolute;
z-index: -99999;
}
#logo {
width: 100%;
height: 100%;
background: url(../cubic-logo-ws.svg) center center no-repeat;
}
Aucun commentaire:
Enregistrer un commentaire