Reputation: 51
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;
}
Upvotes: 5
Views: 1079
Reputation: 4724
On browsers with HTML5, and IE version 10 and beyond, you can use flex containers. The flex container is created by applying CSS attributes to your HTML elements that make them "smart" on layout, resizing, and filling their parent elements.
Here's a tutorial:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
And here's a code generator:
http://the-echoplex.net/flexyboxes/
Upvotes: 0
Reputation: 1122
Your svg is wrong: re-make it only for the white part, without your margins.
Then, you will be able to fit it in an HTML container that plays a moving gradient.
Upvotes: 0