Using SVG as a background image in a div element

I'm currently working on implementing an animated SVG background similar to the one showcased here for educational purposes:

It appears that using a CSS SVG background won't achieve the desired effect, so I need to create the elements inline with the HTML. Here is my progress so far:

Here's the complete code:

http://jsfiddle.net/C8d34/13/

My goal is for the SVG stage to fill the entire blue area so that I can place SVG elements inside and apply animations as seen in the reference link. However, the content of my header menu is pushing the SVG outside of the blue area.

How can I position it behind the content without being displaced by it? Is creating another div the only solution?

This is my SVG code snippet:

<svg viewBox="0 0 100 100"> /* this part */
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Due to other content in the box, my SVG, which should occupy the full blue area, gets pushed down.

The Question at Hand:

I aim to feature an animated SVG background within the blue area with several animated elements. The issue is that the header is causing the entire SVG area to shift downwards off the blue section. How can I make it function like a background while having my content displayed on top?

htmlcsssvg

Answer №1

To ensure the link in the nav element is clickable, I applied the z-index property and used position:absolute for the SVG element. You can view the demonstration HERE.

svg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
div.buttons{position:absolute; bottom:0;} /*div contains the buttons like Free Trial*/
nav{position:relative;z-index:1;}

Answer №2

RESOLUTION

The culprit behind the issue is this CSS rule:

.full_height { height: 100%; }

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

Ensure a button is automatically highlighted within an active class script

I have created a set of buttons that allow users to change the font family of the text. I would like the border and text color to update automatically when a specific option is selected. Currently, the JavaScript code works well, but when the page first l ...

javascriptcssonclick

HTML visibility property fails to function

Hey everyone, I'm working on creating some transparent divs with the following code: <div id="ShopMenu"> <center><ul class="shopul"> <li style="margin-left:12%" class="shopli"><a href="../inde ...

htmlasp.net

What causes an image background to take precedence over the background color of Bootstrap buttons?

Why is the CSS overriding the bootstrap button background styling and making it transparent instead of the default color? For example, if I have a button with the following styling in my document that sets the background-image of the entire body to an ima ...

htmlcsstwitter-bootstrap

Guide to showing specific images alongside text through Ajax and Jquery

Currently, I am faced with the challenge of displaying specific text files using jQuery and Ajax. My goal is to have a text file appear based on the image being displayed. For instance, if an image of an apple is being shown, I would like the text below i ...

javascriptjqueryhtmlajax

Error Alert: jQuery Ajax Not Executing

Looking to send form data to PHP using jQuery. Check out the code below. -------------HTML FORM-------------- <div id="createQuestionBlock"> <form id="createQuestionForm" action="" method="POST"> Question Code: <input id="code" ...

phpjavascriptjqueryhtmlajax

vertical lines alongside the y-axis in a d3 bar graph

https://jsfiddle.net/betasquirrel/pnyn7vzj/1/ showcases the method for adding horizontal lines along the y axis in this plunkr. I attempted to implement the following CSS code: .axis path, .axis line { fill: none; stroke: #000; } I am lo ...

javascriptcssd3.js

Angular 7/8 now allows for empty strings in Template Driven Forms

I've encountered a problem with my form validation that allows empty strings. The required attribute works, but it still allows the user to input spaces. I came across a solution online which involves using ng-pattern with the pattern pattern=".*[^ ]. ...

htmlangularvalidationtemplates

Tools for generating Xpath or CSS selectors on Firefox and Chrome browsers

Struggling with finding helpful plugins for my Selenium webdriver development. Firebug for FF and Selenium IDE are not working for me. Despite trying multiple plugins for both FF & Chrome, I can't find anything to generate xpath or CSS strings. Lookin ...

cssseleniumuser-interfacexpathspy

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...

javascriptjqueryhtmlcss

Avoid inserting line breaks when utilizing ngFor

I am using ngFor to iterate through a list of images like this: <div class="image-holder" *ngFor="let image of datasource"> <img src="{{image.url}}" height="150" /> </div> Below is the corresponding CSS code: .image-holder { di ...

cssangular

Adjust the paragraph font size within the bootstrap stylesheet

We currently utilize the bootstrap v2 CSS and are interested in globally increasing the font size by a point or two. I am wondering if this adjustment is a straightforward modification within the CSS file or if it requires a more complex approach. After a ...

csstwitter-bootstrap

Unable to get HTML submit form to work with PHP

Just beginning my journey with PHP/MySQL and I am facing a little issue. I have created an HTML form and want to use PHP to send the input values to a database. However, when I click submit, instead of processing the data, it just displays all my PHP code ...

phpmysqlhtml

Choose the nth item from a group of elements that do not have the same parent node in common

Is it possible to select a specific li element within a dynamic HTML structure without knowing the exact number of ul elements or li elements in each? From my understanding, neither :nth-child nor :nth-of-type can achieve this due to the elements needing ...

csscss-selectorsless

Ways to create diagonal or vertical table breaks using CSS

If you have a <table> that is very tall or wide and you want it to wrap for screen display, how can this be achieved using CSS? For example, a table that is 300% page height and 30% page width would be divided into three parts. # # # # # # beco ...

htmlcsshtml-table

Creating unique styles for mat-option with Active and Hover effects in Angular Materials

Struggling to find a CSS solution for changing the text color of the active option and on hover. The lack of documentation on styling angular materials in CSS is proving to be an issue. I've tried using .mat-option.mat-selected { background: red; ...

cssangular

Tips for adding list items programmatically in JQuery without generating a new HTML element

I have a list of items that I want to dynamically load more of from my database using JQuery. My current code looks like this: $("#somediv").append($("<div>").load("ajax.php?action=getresults", function() { $('#busy').delay(1500).fadeO ...

jqueryhtmlajaxappend

What are some alternatives for appending after something?

<table border="2"> <tr><td>one</td><td>two</td></tr> <tr><td>one</td><td>two</td></tr> <tr><td colspan="2" id="new" >add new</td></tr> </ta ...

javascriptjqueryhtml

Concealing Form Values with Radio Buttons using HTML, CSS, and PHP

I'm working on creating a sign-in form with multiple options. I want users to be able to choose between signing in with their username or email using radio buttons. I'm wondering if there's a way to achieve this using HTML, CSS, and PHP, or ...

phphtmlcssforms

An empty row in ng-option continues to be visible within the select menu

Hello, I am facing an issue with a select menu in AngularJS. Here is the relevant code: $scope.GetAllSnimateljiBaseInfo = function () { $http.get(serviceBase + "GetAllSnimateljiBaseInfo", { timeout: 6000 }) .success(function (response) { ...

htmlangularjsjsonng-optionsjquery-ui-selectmenu

Element not found: {"method":"xpath","selector":"//*[@id='content container']

The error is occurring despite having the correct xpath in the code: Unable to locate element: {"method":"xpath","selector":"//*[@id='content column']... It seems like there might be multiple xpaths in the field. Here is the code snippet: dr ...

javahtmlxpathselenium-webdrivercss-selectors