Adding color gradient behind footer image
-
I am trying to add a color gradient to include my entire footer. In addition, I have an image in the middle of the footer to show on top of the color gradient. I am unable to figure out how to code it in the CSS.
The blog I need help with is: (visible only to logged in users)
-
Hi there, the site you referenced ( https://susanvitalisblog.wordpress.com/ ) has only one post from November, 2016. Are you talking about https://susanvitalis.com/? If so, I’m seeing linear gradient CSS for #footer-widgets in your custom CSS. Have you gotten this taken care of?
-
Hi, that is the correct site but it has not yet been taken care of. The footer image was always hidden with the linear gradient, even with opacity. The most recent change was putting the linear gradient under #footer instead of the #footer-widget. This allowed the gradient to show through at the top and bottom but not at the sides of the image to cover the black. Suggestions? My intended end result is for the image to be in the center of the footer as it is with the color gradient around all sides which which show the gradient on the sides of the image.
-
I’m wondering if it would be easier to make the footer widget on the bottom, small height with the social tags, etc. and keep it black and have the image and gradient just above it? Is that even possible with this template (Heart and Style)? Is that something I could code?
-
Hi, and thanks for the clarification. Linear gradients will either go from top to bottom, side-to side, or at a specified angle. There isn’t a true way to do a gradient only around the four edges. About the closest we could get with CSS would be an elliptical gradient. You can read more on Gradients and what can be done with them in this CSS Tricks page.
If I’m understanding your second post right above correctly, I don’t think that is possible. I believe we would need another div in the #footer div enclosing the widgets, but going the full size of the #footer div.
-
Thanks for your input. Actually, with the linear gradient, it is going from top to bottom and covering the entire footer. I was hoping to have the image be on top of the gradient with the gradient then showing around all 4 sides of the image. When I put the gradient code within the footer widget, the linear gradient covers the entire footer but hides the image. The problem is the black color along both sides of the image which is where I am trying to get the gradient to show through. It shows at the top and bottom. I’m sorry I’m not being very clear with this! I really appreciate your help.
-
Hi, I see you have a gradient in now with the widgets, and I think that looks very nice. Are you happy with it the way it is?
-
Thanks. I decided to get rid of the image and just use the gradient. I appreciate your help!
-
- The topic ‘Adding color gradient behind footer image’ is closed to new replies.
WordPress.com Forums 