What steps should I follow to create a cohesive background design using CSS?

https://i.sstatic.net/e3LYL.png

Is there a way to combine two separate div elements in CSS? Currently, the image Row and col are not connected to the above SVG blob. How can I utilize the blob as a background? Based on the code provided below, they appear separated and I'm unsure how to merge them together to use the blob as a background.

Please refer to the image below for easier understanding

<Row className="p-5">
            <div className={classes.blob}>
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        fill="#08BDBA"
                        d="M18.3,-12.9C32.5,-19.3,59.1,-29.2,70.8,-25.8C82.5,-22.4,79.3,-5.7,75,9.4C70.7,24.5,65.1,38.1,53.6,40.2C42.1,42.4,24.5,33.1,11.6,34.7C-1.3,36.2,-9.6,48.5,-16.6,49.6C-23.6,50.7,-29.4,40.6,-38,32.1C-46.6,23.6,-58.1,16.8,-56.4,9.8C-54.7,2.9,-39.8,-4.2,-34.8,-16.2C-29.8,-28.2,-34.8,-45,-30.6,-43.2C-26.5,-41.5,-13.2,-21.1,-5.6,-12.4C2,-3.6,4,-6.5,18.3,-12.9Z"
                        transform="translate(100 100)"
                    />
                </svg>
            </div>
            <Col sm={12} lg={6}>
                <Image
                    src="/images/heroanimation.gif"
                    alt="Image Show Max"
                    width={500}
                    height={500}
                />
            </Col>
css

Answer №1

Place both images within the same column, then set the row position: relative and 2 divs with position: absolute. This way, you have the flexibility to adjust the positioning using top, right, bottom, left according to your requirements.

<Row className="p-5">
            <Col sm={12} lg={6}>
            <div className={classes.blob}>
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        fill="#08BDBA"
                        d="M18.3,-12.9C32.5,-19.3,59.1,-29.2,70.8,-25.8C82.5,-22.4,79.3,-5.7,75,9.4C70.7,24.5,65.1,38.1,53.6,40.2C42.1,42.4,24.5,33.1,11.6,34.7C-1.3,36.2,-9.6,48.5,-16.6,49.6C-23.6,50.7,-29.4,40.6,-38,32.1C-46.6,23.6,-58.1,16.8,-56.4,9.8C-54.7,2.9,-39.8,-4.2,-34.8,-16.2C-29.8,-28.2,-34.8,-45,-30.6,-43.2C-26.5,-41.5,-13.2,-21.1,-5.6,-12.4C2,-3.6,4,-6.5,18.3,-12.9Z"
                        transform="translate(100 100)"
                    />
                </svg>
            </div>
            
                <Image
                    src="/images/heroanimation.gif"
                    alt="Image Show Max"
                    width={500}
                    height={500}
                />
            </Col>

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

Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding

I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear: --------------------------------------------- ...

javascriptjqueryhtmlcss

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

jquerycssangularjstimepicker

What is the best way to ensure that only one div is toggled at a time while using the toggle class function?

$(document).ready(function(){ $("#items").children().click(function(){ $(this).toggleClass('clicked'); }); }); .clicked { background-color:red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></s ...

javascriptjqueryhtmlcss

What is the best way to transform all elements on a webpage into a dynamic scrolling marquee?

Is there a way to make every div in a web application scroll like a marquee? Perhaps by using a specific CSS class or other method? The application is built with Angular 4 and Bootstrap. ...

htmlcssangular

Can parameters be included in the HTML class attribute?

Is it possible to embed specific information into HTML elements, like images, without disrupting valid HTML markup? Would the following example be considered valid HTML? <img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" > The idea is ...

jqueryhtmlcss

Ways to efficiently update styles dynamically using css and/or javascript

I am trying to update the styles of a button when it is clicked. I initially set the style for the first element on page load, but now I need to remove those styles from the first element and apply them to the clicked button instead. I am having trouble fi ...

javascripthtmlcssknockout.js

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

I am currently working on a project where I have an image and a title displayed below the image. My goal is to change the color of the text when hovering over the image, as well as adjust the opacity of the image. Additionally, when hovering over the title ...

javascriptjqueryhtmlcssdjango

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

htmlcssp5.js

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

javascriptcssangularjsangularjs-directive

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

javascriptjquerycss

Height of Parent Div minus Margin Top equal to 100%

I am working on a layout that requires three divs with different heights and header sizes to be positioned 100% from the top of their parent, while taking into account the height of the headers. I could use jQuery to achieve this, but since it's a res ...

csscalc

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

javascripthtmlcssreactjs

Frequently encountering broken styles in Magento 1.9 due to missing CSS and JS files

Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...

cssmagentocachingstyles

Having trouble with your mobile dropdown menu not responding to clicks?

I'm having trouble getting a dropdown menu to work on the mobile version of my website. When I click on the dropdown menu image, it's supposed to appear, but it's not working as expected. JSFiddle: https://jsfiddle.net/xfvjv184/ Included ...

javascriptjqueryhtmlcssdrop-down-menu

Styling a clock with rounded corners using CSS: Border-radius trick

Attempting to craft a analog 12-hour clock using basic CSS properties, I initiated the process by forming a square div of the size 500px. Applying a border-radius of 250px resulted in an aesthetically pleasing circle design. Following this step, I incorpor ...

htmlgeometrycss

Handling mousewheel events for child elements and their parent element

I developed a custom jQuery plugin that replaces the default scrollbar with my own, managing mousewheel and bar dragging events. The issue arises when I place content containing my custom scrollbar within another content also using my scrollbar. When I sc ...

javascriptjqueryhtmlcssmousewheel

Show the date and time in a visually appealing way by using HTML and JavaScript in an HTA application with scrolling effects

I have the following JavaScript code to show the current date in the format Mon Jun 2 17:54:28 UTC+0530 2014 within an HTA (HTML application). Now, I would like to display it as a welcoming message along with the current system date and time: Mon Jun 2 17: ...

javascriptcsshtmlhta

Positioning Images in Tailwind Modals

I'm currently working on building a modal using Tailwind in Vue, but I've run into some challenges with aligning the elements inside the modal as desired. I've experimented with removing certain Tailwind classes and have tried implementing ...

javascripthtmlcssvue.js

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

cssreactjsnext.jstailwind-css

A guide to implementing div wrapping in HTML

I'm in the process of using flexbox on my website. I have 10 div elements that I want to wrap around each other closely without any gaps between them. My goal is to have "4" positioned to the right of "1", instead of creating a new row and moving dow ...

javascriptjqueryhtmlcss