Driving me nuts! Overlaying a transparent SVG/PNG file on top of background

HTML & CSS
, ,
1

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) should overlay 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? Driving me nuts!

Any fixes/ideas greatly appreciated!

HTML:

<!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">
  </div>
  </div>
</body>

</html>

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;
}
2

I might be missing something but haven’t you told gradient to be 100% in both directions which would cover the body which you want white.

3

You could do this a number of ways.
Have a plan white background, the the logo element can have both the gradient and image applied as the background.
Or have the image as an <img> with a gradient background.
Or have the gradient be within the image and the white parts be transparent.

<ot>
What’s with the self closing <div>s?
</ot>

4

The SVG file is above the root and makes it difficult to download and test :frowning:

5

Looking at the svg, you need to reduce the viewbox size down to the extents of the rectangle.

6

Yes, that was the intention. I wanted the gradient to be 100% width and height.

And then on top of it another div with white background as 100% width and height, with the SVG centred in the middle, so that it shows the gradient through its transparent parts. But when I make this div’s bg as white, it shows white through the transparent parts.

Will have to think of a different way of structuring it. Going to try some of the suggestions below.

7

The way to do it would be to have an svg with gradient fill on a white background.
As it is, the svg has a viewbox bigger than the white rectangle, so it won’t block the background out even if it fills the container 100%.

8

If you go here: http://cubicfoundations.com - you can see that the gradient is animated. It changes colours randomly.

Are you suggesting a static gradient made from within say Illustrator? As this isn’t what I want to achieve.

I’d like the animated gradient to show through the transparent parts of the SVG, whilst the whole page has a white background.

9

No, an animated gradient applied to the svg fill.

10

Ah? How does that work? Would the same apply to transparent PNG of the same logo?

11

See the article.
It does not go into animated gradients, but evidently you already know how to do that. You just apply that to the svg fill.

12

Thanks for the suggestion. I’m a designer not a coder… And not very good with code. So i’m unsure how to do this programatically. I will try.

13

I have moved the SVG over, so you can test if you like?

14

I like the idea of having a completely white background and having logo div to have both the gradient and image applied as the background. How would you do this?

The problem is that the animated gradient is called up when I use gradient.

body
{
padding: 0px;
margin: 0px;
background-color:#FFFFFF;
}
#gradient << calls up animated 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; << How to apply animated gradient here?
}
15

Reminder, as @SamA74 mentioned:

https://validator.w3.org/nu/?doc=http%3A%2F%2Fcubicfoundations.com%2F

(hint: divs don’t self-close. They need a proper closing tag. <div></div>)

16

Thanks, have just updated closing divs!

18

Here is a crude example using css animation that could probably be improved upon, I have not worked with gradients in svg before, or done much with css animation, so putting the two together didn’t go as well as it could have.
I’m not sure you can apply a css gradient directly to the fill property in css, it did not work putting them in the keyframes anyway. I think you have to apply the gradient via the <defs> as per the article and I wasn’t sure how to animate that.
So I cheated and applied an animated hue rotate filter to the svg. It sort of works, but the hue rotate does not account for the differing brightness of the colours, so some get a bit muddy.
The second example is a flat colour, not gradient with animated hsl colours.
Unfortunately, although the colours are defined in HSL, they are still interpolated internally by animation (and gradients for that matter) in RGB. So I could not just have 2 keyframes, 0deg @ 0% and 360deg @ 100%. It needs a few tween frames to give a smooth hue rotation. Probably more than the 90deg increment ones I added.

I do wish css would interpolate colours in the mode you use if they are all the same, not in RGB all the time.

19

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