I am trying to achieve a torn and indented effect on an image on my webpage, with rough edges and an inner shadow. I want the content on top of this image to scroll underneath the torn edges without extending beyond the visible area of the image. The image format is PNG with transparency around the torn effect, but I am having difficulty getting the content to hide under the background properly.
It appears that you are getting close.
To optimize your cotext div, experiment with positioning it 20px from the top.
<div id="cotext" style="position:relative;top:20px;">
This adjustment should provide a better fit.
The issue lies in having only one image. Regardless of whether it is transparent or not, it will still be positioned beneath the text, making it impossible for the text to show through. To solve this problem, consider splitting the image into two separate parts: one containing the background (silver shiny part) and the other with the ripped part and a transparent center. Place the background image underneath the text and the cutout image on top of the text using z-index.
Update:
I just noticed that the background image already has a transparent outer layer. Here's what you can do:
Second Update:
It seems that the white background won't match your page's design. In that case, consider this alternative approach:
Use the silver background image without any layer effect, maintaining the transparent border
For the top image, include only the layer effect on a transparent background without the silver part, keeping the transparent border
This setup will allow the text to be below the shadow effect, softening the abrupt cut line when scrolling. Although some visibility of the cut line may remain, it will reduce its impact. However, keep in mind that the shadow effect will also overlay the images and text, so this solution may not be ideal for your design.
Substitute the following line
<div id="section">
for the following
<div id="section" style="padding: 10px;">
I've been working on the following code: renderActionButtons(actionButtons){ let actionButtonsContent = actionButtons.map((button, i) => { return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style= ...
Hello, despite extensive searching and testing, I am still unable to locate the issue and therefore I am reaching out to seek your assistance in resolving my problem. Within a form that I have created, upon clicking the submit button, a javascript functio ...
For my application, I am utilizing the display: grid property. My goal is to have the grid items always maintain a square shape by applying an aspect ratio of 1/1. While this works perfectly in Chrome, Firefox seems to ignore the aspect ratio code. Even co ...
As I delve into building a web app using reactjs, one particular challenge I encounter is ensuring its responsiveness. An issue arises when the browser size changes, causing my components to overlap and lose alignment. Is there an easy solution to preven ...
For my University project, I am developing an HTML and JavaScript-based mp3 player using the Web Audio API. You can check out the progress of this project by visiting this link: While everything is running smoothly on Firefox and Chrome, Safari is posing ...
Currently facing an issue with Swiper Slider and Simple Parallax Scrolling. Whenever I switch slides, the same image is displayed repeatedly. I suspect the problem lies in the fixed position of the image within the parallax effect. Attempted to resolve b ...
Currently, I am working on a website that requires users to either log in or register if they do not have an account. Below is the code I have developed for the login page: <span href="#" class="button" id="toggle-login">Log in</span> <di ...
I'm struggling to implement a feature where users can search for authors in a database and be redirected to the corresponding HTML if found. Otherwise, it should display a message saying "No Author Found"... I need some assistance in getting this fun ...
When viewing my website in Internet Explorer, I noticed that some elements appear taller compared to other browsers. After investigating further, I discovered that all these elements contained SVG images. It seems like they have a fixed height even though ...
One issue I encountered while using ejs to extract data into an HTML file is that when the input type is set to "number", the data extraction does not work. However, changing the input type to "text" allows for successful data extraction. Can someone pleas ...
I am in the process of creating a basic static blog page using HTML5, SASS, and CSS. While working on the design, I utilized the 'nav' semantic element for a fixed top bar on the page that remains visible even when scrolling down. Additionally, ...
I have a question about checkboxes and highlighting the checkmarks. The issue I am facing is that I have multiple checkboxes with the same ID for different screen resolutions. When I click on the label for "Check 1" it highlights the corresponding checkmar ...
I have a selection of menu items on my webpage, each with different options: option1, option2, and option3. Additionally, I have corresponding PHP files on my server for each of these menu items: option1.php, option2.php, and option3.php. For simplicity, ...
Having a bit of an issue with positioning/resizing UL lists. I have <li> tags with varying heights but the same width. I want to adjust their position so there is no blank space between them when resizing the window, ensuring they are always close t ...
click here to see the image Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localho ...
I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...
After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...
I'm currently facing a challenge with using jquery's parents/siblings functions to locate specific input elements. Despite my efforts, I can't seem to get it right. Here is the HTML structure I am working with: <div id="ExtrasOptions"&g ...
https://i.sstatic.net/p7PvH.png The image illustrates the issue of the background turning white when the browser autofills. However, I am seeking a solution similar to the transparent input below. ...
I'm in the process of working on an application that includes an edit button: Here's my edit button: <th title="Edit task" class="edit" style="float: right; $color;"> <?php echo "<a href=edit.php?id=" . $row["id"] . "> ...