Customize footer's background color based on current route in Angular

My footer has a unique wavy design that functions as a block, but I'm facing an issue where the transparent part of the wave appears white because it's taking up space as a block.

1

2

3

Below is the CSS code being used:

.wave{
   background: rgba(255, 255, 255, 0);
   height: 15px;
   position: relative;
 }

 .wave::before, .wave::after{
   border-bottom: 5px solid #69c0c0;
 }

 .wave::before{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 10px;
   background-size: 20px 40px;
   background-image:
   radial-gradient(circle at 10px -15px, transparent 20px, #69c0c0 21px);
 }

 .wave::after{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 15px;
   background-size: 40px 40px;
   background-image:
   radial-gradient(circle at 10px 26px, #69c0c0 20px, transparent 21px);
 }

Is there a way to maintain the block function of the footer while adjusting the background color to match the color of the current page it's on?

htmlcssangularbackgroundfooter

Answer №1

To quickly solve this issue, I suggest adding the top property to both pseudo-elements, setting their values to negative height, and updating the background color of .wave.

Revised CSS

.wave{
   background: #69c0c0;
   height: 15px;
   position: relative;
 }

 .wave::before, .wave::after{
   border-bottom: 5px solid #69c0c0;
 }

 .wave::before{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: -10px;
   height: 10px;
   background-size: 20px 40px;
   background-image:
   radial-gradient(circle at 10px -15px, transparent 20px, #69c0c0 21px);
 }

 .wave::after{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: -15px;
   height: 15px;
   background-size: 40px 40px;
   background-image:
   radial-gradient(circle at 10px 26px, #69c0c0 20px, transparent 21px);
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: PHP syntax error occurred due to unexpected double-quote mark

As a beginner in php, I've been encountering an error in my code echo "<a href=\"PHadmin_deletePatient.php?id=<?php echo $row["PatientID"]; ?>\" class='delete' title='Delete' data-toggle= ...

phphtmlsyntax-error

After running my CSS through the validator at http://www.css-validator.org/validator, I encountered a Parse Error. Any suggestions on how I can resolve this issue?

Here are the CSS codes for my media query section. @media (min-width:320px) and (max-width:575px){ .chakra{ width: 100%; float: unset; margin: auto; } } ...

css

Understanding the positioning of HTML elements using CSS

If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...

htmlcsscss-position

Steps for layering three images with distinct red, green, and blue components using HTML and CSS

Is it possible to overlay three versions of an image, each with red, green, and blue components, in order to recreate the original image using only HTML and CSS? I have tried this HTML setup: <div id="container"> <img class="color" id="red" ...

htmlcsscolors

What is the process of sending an HTTP post request in Angular 4 Universal?

Currently, I am working with Angular 4 Universal and attempting to send emails through a contact form using nodemailer. However, I am encountering issues with posting data via http.post. Contact Template HTML: <form (ngSubmit)="onSubmit()"> & ...

node.jsangularexpressnodemailerangular-universal

Struggling with overlaying Bootstrap modals on top of each other

This idea is inspired by the topic Multiple modals overlay I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal. To see how it functions, please run the code below ...

javascripthtmljquerycssbootstrap-5

Tips for preventing a bootstrap modal from being dragged beyond its parent container

I need help figuring out how to prevent my bootstrap modal from being dragged outside of its parent container. Is there a way to constrain the modal within its parent? $(document).ready(function() { ShowValidationResult(); }); function ShowValidation ...

htmljquerycsstwitter-bootstrap

Unlock the navigation tab content and smoothly glide through it in Bootstrap 4

Hey there, I have managed to create two functions that work as intended. While I have some understanding of programming, I lack a background in JavaScript or jQuery. The first function opens a specific tab in the navigation: <script> function homeTa ...

javascripthtmljquerybootstrap-4

Thumbnail vanishes upon being selected

To access my template site currently, please click here. Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here. Below is a snipp ...

jqueryhtmlcssfancybox

When the services contain no data, I must display a dash "-" instead of a blank cell. However, if there is data available, I need to show it accordingly

Area of Distribution expand_more {{element.regionSaleCode}} ...

angular

Incorporating an interface into a data property within a router using TypeScript and Angular

Within the app-routing-module.ts file, utilizing the data property allows us to include custom fields/variables as shown below: ... { path: 'admin-board', loadChildren: './admin-board/admin-board.module#AdminBoardPageModule', dat ...

angulartypescript

Activate the button when a checkbox within a looping structure is selected using Angular 5

As a relatively new Angular 5 user, I am working with a button that looks like this: <button *ngIf="type!='invoices' && this.action==='edit'" disabled (click)="genera(fields.termini)" class="ml-16 mat-raised-button mat-accen ...

angulartypescriptangular5

Hey there world! I seem to be stuck at the Loading screen while trying to use Angular

A discrepancy in the browsers log indicates node_modules/angular2/platform/browser.d.ts(78,90): error TS2314: Generic type 'Promise' is missing 2 type arguments. ...

angulartypescript

Guide on entering text into an Angular input field with Selenium in Python after navigating tabs

After switching tabs, I am attempting to enter text into an Angular input field. However, I keep encountering the following errors: AttributeError: 'tuple' object has no attribute 'send_keys' or ElementClickInterceptedException or NoS ...

pythonangularseleniumxpathcss-selectors

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

javascripthtmlcss

Angular directive to delete the last character when a change is made via ngModel

I have 2 input fields where I enter a value and concatenate them into a new one. Here is the HTML code: <div class="form-group"> <label>{{l("FirstName")}}</label> <input #firstNameInput="ngMode ...

javascriptangulartypescript

Tips for saving and accessing Shopping Cart items using localstorage

As I develop a shopping cart for an e-commerce site, I aim to utilize browser localstorage to store the products. The functions that have been added to my code include: - addToCart(): triggered when the "Add to Cart" button is clicked. - addProduct(): ...

javascriptjqueryhtml

Create a variety of tables populated with numerous hyperlinks within each table on a webpage

I have a website where I need to display multiple tables with different data, along with appropriate links within the table cells. Plan: Each table on the webpage represents a different school subject, showcasing performance metrics such as SAT scores, fi ...

javascriptphphtmlmysql

What is the best way to utilize a component's property within a parent abstract class?

Custom Class: export abstract class CustomClass { constructor(); customMethod() { // accessing the name input of SomeComponent here; } } Some Component: export class AnotherComponent extends CustomClass { @Input() name: string; constru ...

angulartypescript

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid