Tips for elongating an SVG image to cover the entire page downwards

I am experimenting with using SVG graphics in HTML to create a unique background section on my website. The design features a curved shape that separates one part of the site from another. I have successfully created a basic outline for the general shape of the SVG, which you can view here: Check out the animated banner and SVG page section.

However, I am facing a challenge in getting the SVG element to stretch downwards to fill out the rest of the page. Currently, when scrolling down, the SVG stops and the background takes over, making it appear too small for the page: See why the SVG is too small.

I require assistance in extending the SVG to cover the remaining space beneath it.

Here's the snippet of my current HTML code:

<div class="wave">
      <svg width="100%" height="200px" fill="none" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
        <path 
          fill="white" 
          d="
            M0 67
            C 273,183
              822,-90
              2525.01,98
            V 359
            H 0 
            V 67
            Z">
        </path>
      </svg>
    </div>

I've attempted adjusting the SVG values, but they often distort the graphic. I would appreciate guidance on how to effectively resolve this issue.

Additionally, I'd like to learn how to utilize the SVG viewBox property to maintain the aspect ratio of the graphic.

[Update] Here is the progress on the website so far. To achieve the desired result indicated by the arrow, I need to shift the SVG graphic downwards so that the black particle background appears above it: Check out the latest picture update.

htmlcsswebsvggraphics

Answer №1

The issue at hand is that you are able to "fill" until the end of the page, which means manipulating the viewport and aspect ratio as pointed out by Robert. This also implies that your "curve" will not remain consistent across different screen sizes.

Take a look and experiment with the code snippet below:

.wave {
  width: 100vw;
  height: 100vh;
}
<div class="wave">
  <svg width="auto" height="100%" fill="none" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin slice">
    <path
            fill="red"
            d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z">
    </path>
</svg>
</div>

Answer №2

maybe this solution will suit your needs

you can see the wave effect along with a rectangle below

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

.wave {
  width: 100%;
  height: 100%;
}
<div class="wave">
  <svg width="auto" height="100%" fill="#ff0000" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg">
    <path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"></path>
    <rect width="512" height="129" x="0" y="127" />
</svg>
</div>

Answer №3

After considering your issue, it seems like you want a fullscreen image on the homepage with a wave svg element below in the same color scheme continuing in other sections. Here's a potential solution:

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

section {
  min-height: 100vh;
  background-color: #999999;
  margin: 0;
}

section h2 {
  margin: 0;
}

#home {
  margin: 0;
  padding: 0;
  width: 100vw;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: cover;
  background-position: center;
  position: relative;
}

#home .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #7b98bc;
}

.wave {
  width: 100%;
  height: 100vh;
}

.wave svg {
  display: inline-block;
}
<section id="home">
  <div class="wave">
    <svg width="100%" height="auto" fill="#999999" viewbox="0 0 512 128" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg">
            <path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"/>
        </svg>
  </div>
  <div class="title">
    <h2>Title of my website</h2>
  </div>
</section>

<section id="part1">
  <h2>here we are section part1</h2>
</section>

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

CSS: Dynamically adjusting height based on parent element's current height

I'm seeking clarification on the topic at hand. Why am I unable to simply use the following code: <div style="min-height: 100vh"> <div style="height: 100%"> </div> </div> When I implement this code, ...

htmlcssbootstrap-5

swapping out the text of a link for mobile viewing

This piece of code is responsible for generating the back and next links on my Wordpress website. function.php " class=""> <?php if ( is_single() ) : // navigation links for single posts ?> <?php next_post_link( '<div class=" ...

javascriptphpjqueryhtmlwordpress

What is the best method for retaining the complete YQL outcome within a JavaScript object?

I am trying to store the output of my YQL Query in a JavaScript object Here is my query: SELECT * FROM html WHERE url="http://myurl.com" and xpath="/html/body/center/table[1]/tr" Can someone guide me on how to proceed? I have gone through the YQL docu ...

javascripthtmljsonyql

Responsive Material-UI horizontal navigation bar

Hey there! I'm working on developing a UI using Material-UI, and I want to make it so that the menu can be collapsed into a slide-in style menu when accessed on a mobile device. Currently, I'm using tabs which allow for sliding left and right, b ...

cssmenumaterial-ui

What is the best way to vertically align Angular Material tabs?

In my current project, I decided to use angular material and encountered a problem with the angular material tab. I wanted to arrange the tabs vertically, but it doesn't seem to be working properly. The alignment seems off and it's not functionin ...

htmlangularjsangular-material

Disable a button during an AJAX request

Whenever a button is clicked, the record is saved to the database without refreshing the page using AJAX. I have implemented the AJAX code successfully. Now I need guidance on how to manage the state of the Submit button - enabling/disabling it dynamicall ...

javascripthtmlajax

Reorder the placement of file inputs that have been prepended

Would it be feasible to have the prepended file input display below the preceding element rather than above it? This way, the "Select a file:" text would remain at the top of all newly added elements. $(document).ready(function(){ $(' ...

javascriptjqueryhtml

React component with element style declared in module.css file and conditional state

I'm in the process of developing a mobile dropdown feature for a React web application. I am looking for guidance on the proper syntax to use when incorporating multiple classes into a React element. My goal is to apply styles from an imported module ...

cssreactjsclassnext.jsclassname

Ways to incorporate text as a background instead of relying on an image in CSS

As the title suggests, I am trying to figure out how to use text as a background instead of an image for my little application. I am currently customizing a drop-down button by changing the button to an upside-down triangle using HTML code ▼. Instead ...

htmlcsshtml-select

Encountering an "unexpected token" error while utilizing the JSOP API in a ReactJS application

I am facing an issue while fetching data from a JSON API, as it is throwing an "Unexpected token" error. Below is the code that I have tried so far. Any help in resolving this problem would be greatly appreciated. Below is the code snippet: var Demo = Re ...

javascripthtmljsonreactjs

Reducing the Bootstrap Navbar Collapse Width

After spending all day searching for an answer, I still haven't found a solution to my problem. Here is the code I am struggling with: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class ...

cssasp.nettwitter-bootstrap

Optimizing VueJS applications with browser caching features for faster loading

I've encountered an issue with my VueJS app. After running npm run build, a new set of dist/* files are generated. However, when I upload them to the server (replacing the old build) and try to access the page in the browser, it seems to be loading th ...

htmlvue.jsbrowser-cache

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Whenever I click a button, an ajax call is triggered to load various html code into a div with the id 'main'. While displaying the html content is not an issue, integrating and applying css and js code to my current page has proven to be challeng ...

javascriptjqueryhtmlcssajax

Guide to opening a link in a new tab within the same webpage

I have observed numerous web applications that feature a single web window with multiple links. When clicking on the links, the corresponding form opens in a new tab within the same web page of the application. I'm curious about how to achieve this fu ...

jqueryhtmlcssajaxjquery-ui

Adding an iframe with inline script to my Next.js website: A step-by-step guide

For my Next.js project, I have this iframe that needs to be integrated: <iframe class="plot" aria-label="Map" id="datawrapper-chart-${id}" src="https://datawrapper.dwcdn.net/${id}/1/" style="width: ...

javascripthtmlreactjsnext.js

Problem with expanding DIV

Currently, I am working on enhancing this page. However, the DIV element containing the overflowing text does not expand to fit the text properly unless the height property is changed from "auto" to a fixed value. Here is the CSS code snippet for referen ...

csscss-float

Is it impossible to create links to any Django admin templates other than index.html?

Currently working on setting up a link that directs users to Django's admin/auth/user/add/ in order to allow them to create a new account for logging in. However, I have encountered an issue where setting href="{% url 'admin:index' %}& ...

htmldjango

Ways to stop bootstrap tabs from ruining inactive content? [keeping track of tab status]

Although Bootstrap tabs are useful, a common issue is that content on inactive tabs is removed from the page flow. When switching to a new tab, the previous tab's display attribute is set to none instead of using visibility: hidden or other methods. ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Tips for incorporating a tooltip into a disabled selectpicker option

A selectpicker I have is filled with various languages, listed as `li` tags within a `ul` tag. You can see an example in the image provided below. https://i.stack.imgur.com/dsg66.png It's noticeable that the `+ Add Language` option in the selectpick ...

jqueryhtmlcsstwitter-bootstrapbootstrap-selectpicker

What is the best method for ensuring three inside divs have equal heights?

I am working with a container div#content that holds three inner divs. I want to ensure that all three divs have the same height, but also expand based on their content. Here is an example of what I have tried: <!doctype html public "-//w3c//dtd html 4 ...

csshtmlheight