CODEWITHSUNDEEP
javascriptjquerycsssvgtransparent
MJC
MJC

Reputation: 51

Overlaying a SVG/PNG file on top of ever-changing gradient background

Here is the link of how it looks currently:
http://cubicfoundations.com

What I am trying to achieve:

http://cubicfoundations.com/SCREENSHOT.png

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

Answers (2)

Xavier J
Xavier J

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

nicolallias
nicolallias

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

Related Questions