"Customizable rectangular container with jagged edges created with Scalable Vector Graphics

Currently, I am undertaking a small project that involves creating a box with rough edges around some text. To achieve this effect, I am utilizing an SVG with unique edges similar to the design found at this link: (except mine is in SVG format).

My goal is to use this SVG as a background for a DIV element and have it seamlessly extend to the edges of the containing DIV, giving the appearance of a non-square shape regardless of screen size adjustments.

Unfortunately, my current method is not producing the desired outcome. This is what we are currently using:

background-image: url(above.svg);
background-size: cover;

This approach falls short because only half of the edges appear rough, while the others extend beyond the visible area.

We also attempted:

background-size: 100% 100%;

However, this resulted in the image maintaining its original dimensions.

I am now uncertain about the best solution using JS/CSS to address this issue.

Here are two potential options I am considering:

OPTION 1: write JS code that:

a. monitors changes in DIV size

b. adjusts width and height of SVG accordingly

c. sets background image as 100% 100%.

OPTION 2:

a. insert image as a typical image within DIV

b. set DIV as position relative and IMAGE as position absolute

c. specify top/bottom/left/right values as ZERO for the image. (Currently not working due to SVG format - reason unknown).

I lean towards option 2 as the more favorable choice, but I remain open to other possibilities...

Any assistance on this matter would be greatly appreciated.

UPDATE: A functioning example can be accessed here: https://jsfiddle.net/sunnsideup/er1xd0wg/15/

javascripthtmlcsssvg

Answer №1

Perhaps consider giving this a shot:

background-size: 100vw 100vh;

It's hard to say for sure if this will solve your issue, but it might provide some assistance

Answer №2

Our solution involves the following steps:

https://jsfiddle.net/sunnsideup/er1xd0wg/15/

  1. Design separate SVGs for portrait and landscape divs to avoid images looking stretched when applied as backgrounds.

  2. Do not specify height and width in the SVG, instead, include a viewbox with actual dimensions like this:

viewBox="0 0 WIDTH HEIGHT"
  1. Include the attribute in the SVG:
preserveAspectRatio="none"

  1. Encode the SVG to a CSS background using:

  2. Add the following CSS properties:

  background-image: url("data:image/svg+xml,.... SVG GOES HERE ...  ");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;

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

Utilizing JavaScript to manage a div's actions throughout various pages

I am currently working on an HTML project that involves having a collapsible text box on each page. However, I am struggling to figure out the best way to achieve the desired behavior. Essentially, some of the links will belong to a class that will set a v ...

javascriptvariableseventslisteners

Having difficulty removing padding from material-ui TabPane

Here is my TabPane: https://i.stack.imgur.com/Ihxmn.png I've been attempting to eliminate the padding. Some suggestions on SO led me to try this: <TabPanel value={value} index={i} classes={{ "& .MuiBox-root" ...

cssmaterial-ui

jQuery slideToggle function not working properly when clicking on a link within a div

I am facing a slight issue with the slideToggle function when there is a link inside the slideup panel. My goal is to create a button that, when clicked, will slide up a div displaying related posts. Subsequently, when another button or project link is cli ...

javascriptjqueryhtmlcss

React.js: Endless rendering occurs when using setState as a callback function, even after props have been destructured

Issue I am facing a problem with my child component that receives button id-name configurations as props. It renders selectable HTML buttons based on these configurations and then returns the selected button's value (id) to the callback function with ...

javascriptreactjsreact-hooksuse-effect

Is there a way to find the JavaScript Window ID for my current window in order to utilize it with the select_window() function in

I'm currently attempting to choose a recently opened window while utilizing Selenium, and the select_window() method necessitates its WindowID. Although I have explored using the window's title as recommended by other sources, and enabled Seleni ...

javascriptselenium

Tips for delivering a variable to a React Native Stylesheet

Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...

javascriptcssreactjstypescriptreact-native

The error message "require is not defined in React.js" indicates that the required dependency is

As I delve into React coding, the following lines are a part of my code: var React = require('react'); For setting up React, I referred to tutorialspoint. The installation directory is set to /Desktop/reactApp/. My React code is executed from ...

javascriptdjangoreactjs

It's not possible to add additional options to the select input in a react

Hi there! I'm currently facing an issue while trying to retrieve a list of options from the backend, map them to another list of options, and add them to a main list. Unfortunately, my attempts have not been successful. Could anyone offer some advice ...

javascriptreactjscore-ui

Tips for creating a pop-up window on an ASP.NET web form

I am looking to incorporate a popup window as a child of my primary asp.NET form. The popup window will allow users to input information using a dropdown list. When the popup window appears, it will take focus and disable the main window. ...

c#javascriptasp.netajax

How to retrieve a value only if it is truthy in JavaScript or TypeScript - Understanding the operator

In React components, a common scenario arises with code like this: <Carousel interval={modalOpen ? null : 8000}> It would be great if I could simplify it to something along these lines (although it's not valid): <Carousel interval={modalOpen ...

javascripttypescript

Creating a PHP-powered contact form for sending emails

I've been trying to set up a contact form, but I'm struggling to make it work. I downloaded a PHP contact form script, but I can't figure out how to get it functioning. Despite searching extensively on Google and here, I haven't found a ...

phphtmlcontact-form

Create a Vue3 Component without attaching it to the DOM

Let's consider creating a Vue3 component in the following way: import { defineComponent } from "vue"; var instance = defineComponent({ computed:{ message() { return 'Hello world' } } }) To instantiate it and ...

javascriptvue.jsvuejs3

In search of the most efficient method for integrating an AJAX-powered TreeGrid feature

Can anyone recommend an Ajax/TreeGrid implementation that meets the following criteria: Must support server side sorting Should be able to load leaf nodes on demand, meaning only children of open nodes are loaded Needs to support paging so that nodes are ...

javascriptajaxtreeviewdhtml

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

javascripthtmlangularjsangularjs-ng-repeat

importing a text file into the appropriate input field on an HTML form

I've been experimenting with this JavaScript code and I can't seem to get it to work as intended. The code is designed to save the value of a single textbox into a text file that can later be loaded back into the same textbox. However, I'm f ...

javascripthtmltextboxsave

ul/div element not displaying background color

I am attempting to showcase navigation items horizontally within a blue colored ribbon. Despite my efforts, the background-color property is not being applied to the ul element. I even tried enclosing it in a div element with a blue background, but still n ...

htmlcssbackground-color

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Below is the HTML code for a Bootstrap Modal dialog box: <div class="modal fade" id="rebateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> ...

javascriptjqueryhtmlajaxtwitter-bootstrap

How can I prevent a horizontal scrollbar from appearing in HTML when using margin:-4px and what are some possible solutions to this

I am facing an issue with a <div> element that contains a grid row element from semantic UI. Despite setting the width to 100%, there is a small space visible on all sides of the row element. I tried using margin: -4px to eliminate the white space, b ...

htmlcsssemantic-ui

Tips for sending multiple values to the next page using AngularJS

Hey there, I'm new to AngularJS and currently using Onsen UI in my demo application. I have two pages in my app and I'm trying to pass two values to the next page. I managed to pass one value successfully, but when I attempt to send the second on ...

htmlangularjsonsen-ui

Using the `preventDefault` method within an `onclick` function nested inside another `onclick

I am currently working on an example in react.js <Card onClick="(e)=>{e.preventDefault(); goPage()}"> <Card.body> <Media> <img width={64} height={64} className="mr-3" ...

javascriptreactjs