SVG fill with no color

Currently, I am attempting to utilize a wave SVG while also having a background image set for the body of the webpage. However, I am encountering an issue where I want the SVG to be filled with transparency so that the body background image shows through. Despite my attempts to set the fill to transparent using fill: transparent or fill-opacity: 0, the result is that all the wave shapes disappear. Is there a way to replace the color #000000 with a transparent value that allows the body background image to show through?

For reference, here is an example code snippet: https://jsfiddle.net/nLt2vu4k/

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}

header {
    min-height: 20rem;
    background-color: cyan;
    position: relative;
}

.shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.shape svg {
    position: relative;
    display: block;
    width: calc(128% + 1.3px);
    height: 163px;
}

.shape .shape-fill {
    fill: #000000;
}
<html>

<body>
<header>
<div class="shape">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
    </svg>
</div>
</header>
</body>
</html>

Thank you in advance for your assistance, Warm regards.

Answer №1

To make an element transparent, set the "fill-opacity" to 0 within the path:

<html>

<body>
<header>
<div class="shape">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill" fill-opacity="0"></path>
    </svg>
</div>
</header>
</body>
</html>

Answer №2

Utilize clipPath in conjunction with your SVG

To achieve a desirable outcome, it may be necessary to modify your SVG

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}

header {
  min-height: 20rem;
  background-color: cyan;
  position: relative;
  clip-path: url(#myClip);
}

.shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.shape svg {
  position: relative;
  display: block;
  width: calc(128% + 1.3px);
  height: 163px;
}

.shape .shape-fill {
  fill: #000000;
}
<html>

<body>
  <header>
    <div class="shape">
      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <clipPath id="myClip">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
        </clipPath>
    </svg>
    </div>
  </header>
</body>

</html>

Answer №3

Consider designing a new svg element to act as the header background and eliminate the need for a header background-color.

* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}

header {
min-height: 20rem;
position: relative;
}

.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}

.shape svg {
position: relative;
display: block;
width: 100%;
height: auto;
}
<header>
<div class="shape">
<svg width="671" height="221" viewBox="0 0 671 221" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H671V195C375 304 282 14 0 195V0Z" fill="#0ff"/>
</svg>

</div>
</header>

https://jsfiddle.net/afelixj/7z1L5xdo/3/

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

Hover effect on two divs changing states

I was so close to solving this issue, but I'm stuck on the final part. Here's the code snippet I've been working on: /* valuecanvas */ #wrappercs { margin-top: 3px; width: auto; height: auto; display: block; float: right; bac ...

Is it possible to set a single Tailwind breakpoint that will automatically apply to all CSS styles below it?

Responsive design in Tailwind is achieved by using the following code snippet: <div className="sm: flex sm: flex-row sm: items-center"></div> It can be cumbersome to constantly include the sm: breakpoint for each CSS rule. I want ...

Working with JavaScript Arrays within a JSON file data

I am currently learning React and attempting to display random images from the Picsum website using their API. The JSON file I receive contains various information, but I am specifically interested in extracting the image URLs. Although it appears that my ...

Dynamic content loading using AJAX to selectively update a designated section

I am having trouble displaying the error message in my form. Currently, it is causing my form page to load four times. Can someone help me identify what I did wrong? I only want to display that span: controllers: <?php /* * File Name: user.php */ ...

When implementing the "box-sizing: border-box" reset, the layout may become distorted if the image height is specified in percentage

I am facing an issue with my header containing a logo when I apply the box-sizing: border-box reset. Here is the functional header: .header-container { height: 60px; width: 100%; background-color: #333333; color: white; display: flex; justif ...

The current issue with this javascript function is that it is failing to produce any output

function calculateOverallCGPA() { let cumulativeGPA = 0.00; for (let i = 1; i <= semNum; i++) { const GPAforOneSubject = parseFloat(getElementById(`subs${i}`).value); cumulativeGPA += GPAforOneSubject; } const finalCGPA = ...

Is it necessary for background images to be loaded on mobile devices within media queries in CSS3?

Assuming the following CSS: div {background: #000} @media (min-width: 1000px) { div {background: url(myimage.jpg)} } Would a smartphone with a width of 320px download the background image? Thank you! ...

What is the process for transforming the search bar into an icon located at the top of a WordPress site?

For the past few weeks, I've been attempting to convert the search bar on my website (which is currently a plugin) into an icon positioned near the header. I've experimented with modifying the child theme's functions.php, the parent theme&a ...

When a HTML table is generated from imported XML, DataTables will be applied

I am facing a challenge with my code and would appreciate some help. I am trying to load an XML file using jQuery and then use DataTables on my HTML table. However, the plugin doesn't seem to be functioning correctly. When I manually create an HTML ta ...

Incorporating a .jar file into HTML (for remote controlling a Raspberry Pi)

In my current project, we are working on remotely controlling a toy car using two Raspberry Pis (one in the car, one in the remote control). The setup is operational at this point, allowing the remote control to drive the car using a touch display. We hav ...

The div is repositioned without the use of padding or margin properties

I am facing an issue with my Next.JS application where a div is not aligning properly at the top of the page. Despite setting padding and margin to 0 for body, HTML, and the div itself, it seems to be slightly off. I have checked all components thoroughly ...

Start fresh with the count for every individual table

In my HTML document, I have multiple tables with columns that have classes "valuation" and "valuation_all". If one cell in the "valuation" column contains the text "FAIL", then the corresponding cell in the "valuation_all" column should display "FAIL"; oth ...

Radio Buttons for Nested Question Toggling

My current setup involves using radio buttons and JavaScript/jQuery to handle nested questions. Based on the radio button clicked (Yes to show, No to hide), extra information is displayed or hidden. Here is an example of the HTML code: <div class="form ...

Tips for aligning three cards in a row using Bootstrap-5

In my Django template for loop, I am trying to display the first three cards from the database on the same line. Currently, only two of them are staying on the same line and I want all three cards to be aligned horizontally. <div class="row"&g ...

The inconsistency of Selenium's StaleElementReferenceException error and the variability of pageload completion codes is causing issues with clicking on elements

Big shoutout to the amazing stackoverflow community for always providing assistance. Lately, I've been grappling with the frustrating "StaleElementReferenceException" issue and haven't found a universal solution yet. Some helpful members have rec ...

What is the best way to showcase accurate information retrieved from mySQL?

I'm currently facing an issue with querying a database and displaying the results. The query is supposed to be based on input from an HTML form. Strangely, when I input a name like "John" into the form, even though there are 2 entries in the table wit ...

What could be causing the p tag to be displacing the parent div downwards?

Can someone help with an issue I'm having? I have two divs that are supposed to take up half of the screen each. However, when I add a p tag inside the second div, it gets pulled down. I am working on creating an HTML email, so I can only use inline s ...

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

I am currently working on designing a grid layout that will display a child element when clicked. Here is what I have in mind: [ link1 ] [ link2 ] [ link3 ] [ link4 ] [ link4 ] [ link4 ] When clicked, it will turn into: [ link1 ] [ link2 ] ...

Experience the sleek transparency when black hues grace the interface on iOS 14 and above

When implementing the code snippet below, .packages > .ulWrapper::after { background: linear-gradient( to left, var(--edge-color) 5%, rgba(0, 0, 0, 0) 95% ); /* option 1 - red */ background: linear-gradient( to left, var(--edg ...