Is there a way to horizontally stretch only the middle section of an image?
Let's say I have this specific image:
https://i.sstatic.net/pty5A.jpg
(source: lawrenceinspections.com)
I need the rounded corners to remain unchanged, so simply stretching the entire image won't work. My goal is to selectively stretch the center part based on its content, while keeping the vertical dimensions consistent.
Any suggestions on how to achieve this? Much appreciated!
To achieve the desired layout, you will need to use three separate images along with three corresponding divs.
The first div should contain the image for the left side, the second div should hold the central content, and the third div should display the image for the right side.
If you prefer, you can create a button with a similar design using only CSS, eliminating the need for any graphics.
For example:
.button{
background: rgb(194,172,224); /* Old browsers */
background: -moz-linear-gradient(top, rgba(194,172,224,1) 0%, rgba(232,241,242,1) 30%, rgba(186,241,244,1) 31%, rgba(18,65,206,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(194,172,224,1)), color-stop(30%,rgba(232,241,242,1)), color-stop(31%,rgba(186,241,244,1)), color-stop(100%,rgba(18,65,206,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2ace0', endColorstr='#1241ce',GradientType=0 ); /* IE6-9 */
color: #fff;
font-family: helvetica;
padding: 30px 60px;
border-radius: 40px;
text-decoration: none;
border: 1px solid #1241CE;
}
If you want to center both horizontally and vertically at the same time, there are two easy methods available: Option One .outer { display:flex; } .inner { margin:auto; } Option Two .outer { display: flex; justify-content: center; align-items ...
Struggling with a React application I'm building, specifically with an issue that's got me stumped. Here's a snippet of code that's causing trouble: onFirstNameChange(event: any){ console.log(event.target.value) // this.setState ...
Embarking on my inaugural project as a Python developer, I am currently in the process of web scraping a retail website. The challenge lies in the fact that the site features infinite scrolling functionality, although at times instead of triggering the inf ...
I am currently working on implementing a stacked chart using chart.js, and I have encountered some challenges: I am struggling to display currency values in the correct format on the chart (the height of the bar is not visible when passing amounts). How c ...
I'm currently working on creating a navigation bar using HTML and CSS. However, I'm facing an issue where the nav-bar doesn't extend to the full width of the page as intended. I've attempted adjusting the padding-left: 0px and padding-r ...
Struggling with a coding issue, I've scanned various discussions that don't quite address my specific problem. Any assistance would be greatly appreciated. In my HTML document, I am using the three.js library to create a scene titled scaledScene ...
Is it possible to have a DIV displayed over a PDF document? This method seems to work with Firefox, but not with Internet Explorer 8 or 9. It's worth noting that the problem persists regardless of which PDF file is being pointed to. <html> < ...
Is there anyone out there who can help me with this issue? I recently entered into a partnership with Google and, as part of the process, had to insert the Google AdSense code onto my website in order to be verified and show ads. Prior to this partnership ...
Trying to improve the readability of my Rails HTML code, I decided to extract certain portions into partials and then used jQuery to render these partials. However, a problem arose where the form seems disconnected after implementing this approach. It appe ...
Hello everyone, I am seeking help with a JavaScript error that is causing some trouble. Whenever I try to sort a table and implement pagination in PHP, I get an error message in the console stating "Uncaught TypeError: undefined is not a function." Despite ...
Recently, I've been attempting to generate a multitude of divs (referred to as bars) and position them in a way that forms a circle in the center. To clarify, here's an example where all bars share the same width and height. Check out the JSFi ...
After successfully logging in, I am able to obtain an access token and establish a socket connection. However, I have encountered an issue where the access token does not automatically update itself when the user logs out and back in again. As a result, my ...
Below is the dynamicpage.js script: $(function() { var newHash = "", $mainContent = $("#main-content"), $pageWrap = $("#page-wrap"), baseHeight = 0, $el; $pageWrap.height($pageWrap.height()); ba ...
UPDATE I previously attempted the recommended adjustments in the initial response, but encountered issues with radio buttons allowing multiple selections and the label number controlling the top radio button. Subsequently, I have experimented further...I w ...
Currently, I am following a YouTube tutorial to learn next.js and have encountered an issue right at the beginning. I am attempting to develop dynamic content and routing for my website using the code snippet below, but I am facing an error: import Link fr ...
I have a project where I need to visit a specific website and interact with it using the Python selenium module. However, I am encountering a popup (a cookie acceptance form) when trying to access the site with a bot. I must accept this popup in order to p ...
I am currently facing an issue with 6 images displayed in a table, 3 per row across 2 rows. I applied the "grow" effect to all the images but it seems like everything is moving around in a confusing manner. Does anyone have suggestions on how I can resolve ...
Is it possible to display a message like "No search results" when there is no data available? I am new to this and only have basic understanding. Can someone guide me on how to achieve this? Example of my JSON data when it's empty: { "status": true ...
I am facing an issue with my JavaScript class and need some help to resolve it. MyClass.prototype.foo = function() { return 0; } MyClass.prototype.bar = function() { return foo() + 1; } Unfortunately, when I try to run the program, it throws an ...
I have just begun experimenting with Sencha's ExtJS. When we view the source file, it only shows the written code and does not display any applied styles or scripts that were added later in the "View Source." The same goes for AJAX; when we load cont ...