CSS: Adding decorative trailing dots below the header when positioned over a background

I am seeking assistance with achieving a specific effect in CSS, as shown in the attached screenshot.

The trailing dots should cover the entire width of the element (100%) and be responsive. However, I encountered an issue when placing the header on a background; the usual technique did not work for me because the white background on the span caused the underlying pattern to disappear.

For reference, here is a link to a fiddle

<style type="text/css">
body{background: red;}
h1{background: url(https://i.sstatic.net/23XVz.png) repeat-x 0 0 transparent;}
h1 span{background: #fff;}
</style>

<h1><span>SERVICE</span></h1>
htmlcsspseudo-class

Answer №1

To achieve this result, utilize the display table-cell property

body {
    background: blue;
}
h1 {
    display: table-cell;
    padding-left: 20px;
}
span {
    width: 50%;
    display: table-cell;
    background: url(https://i.sstatic.net/45YKe.png) repeat-y center top;
}

Check out this fiddle for a live demo!

Answer №2

Give this a try:

<h1>Service<span></span></h1>

CSS:

h1 span {
   display: inline-block;
   background: url(dots.gif) repeat-x 0 0 transparent;
}

Check out these two examples: example 1, example 2.

Edit:

Also, here's example 3 showing the dashed image.

Answer №3

The reason for this issue may be related to how your background image is positioned. You can attempt the following solution:

h1{background: url(dots.gif) repeat-x center center transparent;}

http://example.com/jsfiddle123

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

Having trouble with your HTML iFrame not functioning properly?

My code is not working as expected and I'm puzzled by it. It was working fine yesterday but now it's giving me trouble. <iframe allowfullscreen="" allowtransparency="true" frameborder="0" height="2000" scrolling="no" src="http://www.google.co ...

javascripthtmliframe

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: Managed to get it done using position absolute and @media screen for image size and padding adjustments, but I believe ...

htmlcsstwitter-bootstrap-3flexboxdisplay

Include an Open OnClick event in the React/JSX script

We have a dynamic menu created using JavaScript (React/JSX) that opens on hover due to styling. My inquiries are: Instead of relying on CSS for the hover effect, where in the code can I implement an OnClick event to trigger the menu opening using Java ...

javascriptcssmenureactjs

The $.post method is malfunctioning

I am experiencing an issue where the onchange function is working properly, but the $.post function is not functioning as expected. Below is the HTML code snippet: <input type="checkbox" id="chk" value="3" onchange="checkradio(this.value)"/> Here ...

javascriptphphtmlajax

Steps for designing a complete background picture

Seeking to enhance my CSS skills, I've been faced with a challenging task recently. The objective is to create a full-screen background image with centered text overlay. However, the image appears larger than the screen itself. This is my current se ...

cssreactjs

Vue 3's Paged.js does not respond to requests for page breaks

Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage ...

htmlcssvue.jspagedjs

Incorporate a horizontal scrollbar feature within an HTML section

Currently, I am in the process of learning vue js and would like to create a layout that includes two sections. The first section should occupy 3 grids on the screen, be fixed, and not scrollable, with a division into 4 vertical parts. The second section s ...

javascripthtmlcssvue.jsscrollbar

Utilize the keyboard's vertical arrows to adjust values as needed

Implement the functionality to increase and decrease the value in a label or p tags using the onkeydown and onkeyup events, without requiring a textbox input. I have come across numerous examples, but they all rely on textboxes. I am looking for a soluti ...

javascripthtmlcss

Constant navigation bar placement

On my website, I have a fixed navigation bar at the top that I want to be transparent. However, when I apply transparency to the navigation bar, the content inside it also becomes transparent. To fix this issue, I added a relative position to the content w ...

htmlcss

Effortless Table Extraction using PHP's Simple HTML DOM Parser

I am in the process of extracting HTML data from a local weather channel's website in order to gather closing information for schools, businesses, and churches in my area. However, I am facing an issue as the information is housed within tables that ...

phphtmljsonparsinghtml-parsing

Mobile devices do not support HTML5 Video playback

Here is the HTML5 Video code I am using: <div id="lightBox1" class="lightBox"> <video id="video" controls preload="metadata"> <source width="100%" height="470" src="/ImageworkzAsia/video/iworkzvid.mp4" type="video/mp4"> ...

javascriptjqueryhtmlvideo

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Is there a way to access and display a website page hosted at this URL - , without encountering any authentication dialog box from my application on the same network? I have been unable to bypass the username and password entry request. I successfully imp ...

javascripthtmlajax

Activate the timepicker in Bootstrap when the user clicks on the input field

Struggling to implement a timepicker feature? Look no further than this resource. After adding the necessary js and css to your project, you may encounter issues with the popup not appearing when clicked. The code provided offers a TextBox control with s ...

javascriptjquerycsstwitter-bootstraptimepicker

Can you explain the guidelines for overlapping CSS media queries?

When it comes to spacing out media queries accurately to prevent overlap, how should we approach it? Let's examine the following code as an example: @media (max-width: 20em) { /* styles for narrow viewport */ } @media (min-width: 20em) and (max ...

cssresponsive-designmedia-queries

What is the best method to customize CSS in ExtJS 5.0 by overriding a function?

Is there a way to dynamically add a rule to existing CSS using code, particularly in overrides? For example: var sheets = document.styleSheets; // Some code omitted for simplicity var sheet = sheets[sheets.length - 1]; sheet.insertRule('.overlay {flo ...

javascriptcssextjsextjs5

Display the title tag when hovering over an image

Hey there! I'm looking to display the title tag of an image directly inside the image itself. Here's an example to illustrate what I mean: http://jsfiddle.net/51csqs0b/ .image { position:relative; width:200px; height:200px; } .ima ...

phpjqueryhtmlcsswordpress

Issues with the functionality of the submit button (html, js, php)

Seeking assistance with a submit button functionality issue - I have a simple submit button that allows visitors to enter their email address. Upon clicking the button, it should add their email to a CSV file and display a pop-up thank you message. The pr ...

javascriptphphtmlsubmit-button

What is the best way to coordinate text and photos within Bootstrap?

Currently, I am working on a bootstrap website that features a slideshow with 3 photos. The jQuery function responsible for this is as follows: $(function () { $.vegas('slideshow', { backgrounds: [{ src: 'img/ph1.jpg ...

javascriptjqueryhtmltwitter-bootstrap

Utilizing icons for form-control-feedback in Bootstrap 4

I am struggling to achieve the desired display using Bootstrap 4 form-control feedback styling. The goal is to include an icon inside the input field along with an error message. My current setup includes Angular 5.2.9, Bootstrap 4, and Fontawesome icons. ...

angularcssbootstrap-4font-awesomeform-control

unable to properly display application.html.erb

I am encountering difficulties in rendering my application.html.erb template as I am receiving the following error message: ActionView::SyntaxErrorInTemplate within ApplicationController#home app/views/layouts/application.HTML.erb:10: syntax error, unexpec ...

htmlcssruby-on-rails