As I'm developing a website, I've encountered an interesting challenge...
I have an h3 tag that requires a repeating background on both sides. It's a bit difficult to describe, so I created this graphic to illustrate...
Essentially, it's a title with a repeating background on either side of it, but the background stops where the title starts and then resumes afterwards. Despite trying various CSS approaches, I haven't been successful... Any suggestions?
Illustration of using :before and :after pseudo-elements
http://jsfiddle.net/JTN2U/ - Customize as desired
One approach is to include a repeat-x background in the h3 element and then nest a span tag inside. Of course, there are numerous alternative methods for achieving this effect as well.
For a live demonstration, check out this demo.
It may be helpful to include an additional tag within your h3 element, like so:
<h3><span class="text">title goes here</span></h3>
CSS:
h3 {
background: url('img.jpg') repeat-x;
padding: 0 20px; /* adjust as needed */
}
h3 .text {
background: #fff; /* customize as desired */
}
Update: HTML:
<h3><span class="pre"></span><span class="text">title goes here</span><span class="post"></span></h3>
CSS:
h3 span.pre,
h3 span.post {
background: url('header-bg.jpg') repeat-x;
display: block;
width: 20px;
float: left;
}
h3 span.text {
float: left;
display: block;
}
Is this solution suitable? It's not just one single tag...
<style type="text/css>
div {background-image: url('navlolite.gif'); text-align: center;}
label {background-color: #FFFFFF; padding-left: 24px; padding-right: 24px;}
</style>
<div>
<label>Heading Text Here</label>
</div>
Within my setup, there are two forms. The first form contains a textarea, while the second form appears in a modal. Below is the code for form 1. <div> <textarea name="dynamic-content-unit" id="dynamic-content-unit" class="for ...
Is there a way to remove the top border in material-ui Paper component? I've attempted the code below, but it doesn't seem to be effective. <Paper sx={{ border: 0, borderTop: 0, borderRadius: 0, ...
Occasionally, website pages may take a while to download without the user even realizing it. This can be problematic if the user clicks on an image or button with an event handler attached, as it may break the page functionality. To address this issue, I ...
I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...
I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...
I have a plugins.init.js file that contains a try-catch block which runs on page load. I am looking for a way to execute this code only once when the div with the class counter-value comes into view. Is there a method to achieve this? try { const count ...
Let's consider a scenario where we have an input element like this: <input id="myInput" type="text" /> The question now arises, how can we detect when the value of this input is changed programmatically (such as through $("#myInput").val("new ...
Hey there, I'm currently working on a Shopify website and trying to make the hamburger menu change to a cross when clicked. I've been experimenting with different methods, but unfortunately haven't had any success so far. I have two images â ...
Looking for advice on how to collect data in a text box and display it on another page? I have included HTML code for both the announcement page (where the data is entered) and the archive page (where the data should be shown). Could someone guide me on ...
I am currently working on a project that involves using the PhotoSwipe gallery. At line 175, there is code url:items[0].hqImage. I want to use the index of the current image instead of 0. How can I achieve this? I attempted to utilize the pswp.listen(&ap ...
I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...
I'm trying to show an image in a textview using HTML. I have placed the image at res/drawable/img.png and here is the code I am using: String img="<img src='file:///res/drawable/img.png' />"; txt_html.append(Html.fromHtml(img)); Howe ...
Just diving into the world of Javascript and jQuery, so I have a simple query. I've got a date that I need to break down into a string and then display it as an array. var date = "12/10/2010"; var dateArray = date.split(/); $('#printbox') ...
Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...
Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...
Consider this scenario, where a menu is presented: function toggleHiddenContent(tabClass) { let t = document.querySelectorAll(tabClass); for(var i = 0; i<t.length; i++) { t[i].classList.toggle="visible-class"; } } .hidden-conten ...
Currently in the process of learning Angular, but I've hit a roadblock and can't seem to find a solution. I have a website that provides USPS shipping options, and I need to replace the default text with my own. The vendor's option shows &ap ...
Within my Vue application, there are numerous components that rely on shared variables like colors. I'm considering having each component import a global "variables.scss" file. Would this approach have any adverse effects? ...
I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...
When using Angularjs to automatically populate a list with *ngFor and then implementing a POST service, the list stops functioning properly and only displays the default option. <select id="descripSel" (change)="selectDescrip()" > <option >S ...