Enhancing the appearance of text by applying a background color solely to its length

After conducting thorough research on the issue, I have come across various solutions that could potentially address it. However, despite my best efforts, I am unable to implement these solutions successfully.

The problem at hand involves providing a color background for each line in a block of multi-line text.

Specifically, the challenge I'm facing is as follows: when I nest the text (h2) within a span tag assigned with a class, the entire block gets highlighted instead of individual lines. My goal is to extend the color only up to the end of each line, not the entire block of text.

Although I have included both my HTML and CSS code below, I cannot seem to identify where I am making a mistake. Here is a reference link illustrating what I aim to achieve:

http://css-tricks.com/text-blocks-over-image/

HTML:

<h2><span class="lyrics">
"Some come in the form of codependence<br>
A lot of times only end up being codefendants<br>
Ten bucks say they tell for a lower sentence<br>
And leave you up under the jail, begging for a penance<br>
It don't make no sense, what happened to the loyalty?<br>
Honor amongst crooks, trust amongst royalty<br>
I'd rather go out in a blaze, than give 'em the glory<br>
(How many of us have...) a similar story"<br><br>
-??? 
</span></h2>

CSS:

h2 > .lyrics {
background: rgba(0,0,0,0.3);
float: left;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
line-height: 1.5;
margin-left: 50px;
margin-top: 200px;
position: relative;
}

Answer №1

The issue lies in the usage of float: left on the span element. This causes it to behave like a block element. If you remove this property and opt for a more visible color, you will notice that it simply adds a background color to the lines.

Here is the updated demonstration: http://jsfiddle.net/31vjg5tf/1/

This may slightly affect the text indenting, but it can be resolved by applying proper padding to the h2 element instead of margin to the span.

You can check out the adjusted version here: http://jsfiddle.net/31vjg5tf/3/

In essence, you can transfer the positioning attributes to the h2 element. Most properties, except for font and line-height, can be applied there as well. The span element serves the purpose of providing a background:

h2 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  line-height: 1.5;
  margin-left: 50px;
  margin-top: 200px;
  position: relative;
}

h2 > .lyrics {
  background: rgba(0,0,0,0.3);
}

For an updated minimal code sample integrating these adjustments, refer to this fiddle:

http://jsfiddle.net/31vjg5tf/4/

Answer №2

Adjust the margin settings for the h2 element by adding 50px to the left and 200px to the top. Make sure to remove the margins from the span element, as well as any positioning and floating attributes.

h2 {
margin-left: 50px;
margin-top: 200px;
}

h2 > .lyrics {
background: rgba(0,0,0,0.3);
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
line-height: 1.5;
}

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

Image not appearing when sharing on Facebook

I've been trying to create a Facebook share button using the Javascript SDK, and here is the code I have been utilizing: $(function() { $('.facebook-share').click(function(e) { e.preventDefault(); FB.ui({ method: 'feed& ...

Show loading message on keypress using jQuery

I need assistance with a unique jQuery script for the desired functionality: While inputting text into the text field, I would like the adjacent 'Load' text to be displayed. If typing stops, the 'Load' text should change to 'Del& ...

Issues with CSS animations and transformations on SVG files are not being resolved

I've been attempting to create a transform animation using an SVG file, but unfortunately, the animation or transform isn't functioning at all. I've taken the time to research this issue, however, I haven't found a solution yet. Can any ...

Are the dimensions of <TD> and <table> not displaying properly?

I've encountered a peculiar issue that I need help with. Here is the Fiddle link: http://jsfiddle.net/H3W4X/ If you want to view it in fullscreen: http://jsfiddle.net/H3W4X/embedded/result/ This is the code snippet causing trouble: <div id="wor ...

The battle between DataBind and control property settings

When considering these two methods: <asp:Label ID="Label1" runat="server"><%# DateTime.Now %></asp:Label> and Label1.Text = DateTime.Now.ToString(); Which approach do you prefer and what is your reasoning behind it? ...

How can I display a particular section of my JSON data in an AngularJS application?

Below is an example of a JSON structure: {"years":[ { "year_title":"94", "months":[...] } { "year_title":"95", "months":[...] } { "year_title":"96", "months":[...] } ]} I was able to display the data using the code sni ...

Retrieve the size of an element without having to wait for the browser to "recalculate style"

I am currently focused on optimizing the performance of some code that heavily relies on graphics. One of the main issues I am encountering is the delay in obtaining the dimensions of a specific div element. Most of the time, this process runs smoothly, bu ...

Why isn't the HTML template opening in Outlook 7?

Does anyone know how to fix the code issue on Outlook 7? I've only included the header section of my code here, but please let me know if you need more information. I would appreciate any help with this problem. Thanks! ...

What is the best way to create a scrollable Material UI modal and dialog?

Having a problem with my mui modal where the top content is getting cut off and I can't scroll up. I've tried adding the {overflow:"scroll"} property to the modal but it's not working. Here's the code snippet I'm currentl ...

Tips for showing a value in a disabled text input box

When users access the page, the table should appear as follows: Marks Per Answer Total Marks Marks Remaining (blank text input) 4 4 (blank text inp ...

Tips for adjusting the content direction of a Popover

I am currently working on a component that includes the following code: import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, Button, } from "@chakra-ui/react"; import { ReactNode } from "react"; import { Co ...

What is the best way to reposition the origin of the canvas to the center?

As a beginner in html and JavaScript, I am currently working on a program that involves points and lines in a coordinate system. However, the canvas for html5 has its origin at the upper corner, and I need to create a coordinate system with the origin at ...

Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

I am in search of a straightforward Bootstrap 4 carousel that showcases a glimpse of the next slide on the right. Despite exploring similar questions, I have not found a suitable solution. The links to those questions are: 1)Bootstrap carousel reveal part ...

Having trouble with submitting the jQuery form

I have written a script to submit a form after validation and receive the values in a PHP file using $_POST. However, I am not able to retrieve the values in the PHP file. When I try to echo the values, it shows up as blank. Can someone please guide me a ...

Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

In the scenario of a single-page website with various sections (divs) and a header containing links to different anchors on the page, there is a desire to have an indicator highlight which anchor the user is currently viewing. An example of this can be s ...

Button with tooltip for easy access to trigger a modal dialog

My task involves creating a button with a tooltip that displays simple statistical information to the user, such as a student's grades (e.g., "Homework: 100%, Exams: 85%"). Upon clicking the button, a modal should appear with more detailed information ...

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

While testing my website on my iPhone, I noticed a significant gap appearing on either side of the app in landscape view in Safari. Is there a solution to fix this issue? The problem occurs in both Angular and React applications, examples of which are disp ...

What is the best way to prevent users from clearing the value attribute of an input element?

Sample Scenario: While a user is entering information into a field, I would like to restrict the ability to delete or clear out the value, such as keeping "Friend" intact. Can this be accomplished using CSS or JavaScript? ...