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

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

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

javascriptjquerycssresponsive-design

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

javascripthtmlcssreactjs

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Initially, my React App functioned perfectly with global CSS included. However, after running npm i next-images, adding an image, modifying the next.config.js file, and executing npm run dev, I encountered the following notification: "Global CSS cannot ...

cssreactjsimportsassnext.js

When I expand the accordion next to it, the accordion disappears, and it also vanishes when I close that accordion

After incorporating accordions into my site, I encountered a peculiar issue (as shown in this video): when I open one accordion, the adjacent accordion also opens unexpectedly. Similarly, closing one accordion causes its neighboring accordion to mysterious ...

javascripthtmlcssaccordion

Pop-up alert for text sections that are longer than a specific character limit

As I work on a website featuring dynamically generated blog posts of varying lengths, I'm looking to restrict the height of each post to 250px. Should a post exceed this limit, I want to truncate it and include a "read more" link that opens a modal ov ...

javascriptjqueryhtmlcss

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

javascripthtmlcssfirefox

JavaScript Tab Fade Effect

I have a tab system that utilizes JavaScript to switch tabs. I am trying to implement a fade in and out effect when switching tabs. The current JavaScript simply adds or removes the clicked tab selected by the user. I have managed to partially achieve the ...

javascriptjqueryhtmlcss

Flow bar for micro-tasks

In my current project, I am faced with the task of organizing a series of 4 mini tasks and displaying to the end user which specific mini task they are currently on. To accomplish this, I have been utilizing image tags for each task. <img>1</img ...

javascriptjqueryhtmlcss

Display an image with a colored background using CSS

Most of you have probably noticed that images on Facebook come with a default background. How can I achieve a similar background color for images without using an additional div just for the background? My current codes do create a background color, but th ...

css

Tabulator filter - Enhancing CSS elements for a unique touch

Is there a way to customize the CSS elements of filters used in tabulator.js? Specifically, I am looking to: Apply different background colors to text filters Add a down arrow on the right side of each drop-down filter box I have included a screenshot ...

csstabulator

conceal the mustard-colored dots within the overlay

Whenever I trigger the link, a modal window pops up, but it comes with an unwanted black background color and yellow dots. How can I prevent the yellow dots from showing up on the overlay? http://jsfiddle.net/y88WX/18/embedded/result/ <nav class="da-d ...

javascriptjqueryhtmlcss

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Encountering an issue with the hover pseudo-class not functioning properly on Surface pad's Chrome browser. The hover effect is working as expected in other browsers, but not in Chrome. I am using a Surface pen to test the hover functionality. HTML: ...

htmlcss

To ascertain whether the mouse is still lingering over the menu

I have a condensed menu construction that unfortunately cannot be changed in HTML, only CSS and JS modifications are possible! $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouse ...

javascriptjqueryhtmlcss

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobil ...

htmlcsstwitter-bootstrap

Run Javascript code if a specific CSS class is present on an element

Whenever a user enters an incorrect value into a textbox on my page, an error message is displayed within a div with the class 'validation-errors'. I'm looking for a solution to trigger a javascript function (which adds a CSS property to a ...

javascriptjqueryhtmlcssasp.net-mvc

Preventing responsive elements from loading with HTML scripts

Currently, I am utilizing the Gumby framework which can be found here. Everything appears to be running smoothly. My goal is to incorporate a mobile navigation list where the links are grouped under a single button, as outlined here. Initially, this funct ...

javascriptjqueryhtmlcssgumby-framework

Jquery is not displaying the background color of the progress bar

Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you c ...

javascriptjqueryhtmlcss

Fixing alignment and responsiveness problems with a hovering circle div

I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing. Here is a live demo: demo Below is my code: <div id ...

htmlcssresponsive-design

Comparing Yii's CHtml::link() function with the use of regular <a href=''></a> HTML tags

When using elements like yii CHtml::link, what are the recommended practices? I'm working on a button that needs to include an icon, text, respond to hover events, and be wide. Are there any benefits to using CHtml instead of a regular tag that can e ...

jqueryhtmlcssyiiyii-chtml

Does setting white-space:nowrap enlarge the div?

My CSS code for div .name sets the width to 75% to truncate text if it doesn't fit. However, resizing the window causes the text to remain the same size and my entire website structure falls apart. This is the HTML code snippet: <tr> <t ...

htmlcss