Ensure that the background-color stretches across the entire width of the screen

This text needs to be centered and the background color width should cover the entire screen. Unfortunately, I couldn't find a solution for it here.

    .carousel-content {
     text-align: center;
      bottom: 0px;
      opacity: 0.8;
      display: inline-block;
      border: none;
      text-transform: uppercase;
      position: absolute
    
    }
    .carousel-content span{
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
      color: #fff;
      background-color: #c52d2f;
      background-size: cover !important;
      width: 100%;
      padding: 10px;
      text-shadow: 1px 0px 1px #000;
    }
    #span1{
      font-style: italic;
      font-size: 35px;
      white-space: nowrap;
    }
  <div class="main carousel-inner">
    <div class="item active">
      <%= image_tag "limo1.jpeg"%>
      <div class="carousel-content">
        <p><span id="span1" class="animated bounceInLeft delay-1s"> NEED A LIMOUSINE? Call OR Text: <a href="tel:+1-604-374-7474">(604) 374 7474</a> </span></p> 
      </div>

The 

<%= image_tag "limo1.jpeg" %>
part is specific to Ruby on Rails and not relevant to this particular issue.

htmlcss

Answer №1

Is this the solution?

.carousel-content {
  text-align: center;
  bottom: 0px;
  opacity: 0.8;
  display: block;
  border: none;
  text-transform: uppercase;
  position: absolute;
  left: 0; /* Added */
  right: 0; /* Added */
  background-color: #c52d2f; /* Added */
}
.carousel-content span {
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  color: #fff;
  width: 100%;
  padding: 10px;
  text-shadow: 1px 0px 1px #000;
  /* Background-color and background-size removed */
}
#span1 {
  font-style: italic;
  font-size: 35px;
  white-space: nowrap;
}
<div class="main carousel-inner">
  <div class="item active">
    <%= image_tag "limo1.jpeg"%>
    <div class="carousel-content">
      <p>
        <span id="span1" class="animated bounceInLeft delay-1s"> NEED A LIMOUSINE? Call OR Text: <a href="tel:+1-604-374-7474">(604) 374 7474</a></span>
      </p> 
    </div>
  </div>
</div>

When testing in Codepen, it appears to function correctly. However, considering you are incorporating it into a carousel and the associated code is missing, I'm unable to verify if the modifications will work seamlessly within that context.

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

How can I show a view page in a specific div element using CodeIgniter?

Here is how I'm implementing the dashboard view in my controller. My goal is to have a specific page, like the index page, displayed within a div element rather than opening in a new tab. public function index() { $this->load->view('in ...

javascriptphpcsshtmlcodeigniter

The new data is not being fetched before *ngFor is updating

In the process of developing a "Meeting List" feature that allows users to create new meetings and join existing ones. My technology stack includes: FrontEnd: Angular API: Firebase Cloud Functions DB: Firebase realtime DB To display the list of meeting ...

javascripthtmlangulartypescriptasynchronous

When hovering over a single list item, only the top border will be displayed without affecting the

Check out the live link provided below: I am attempting to add a border and later an arrow in the middle on hover in the menu. However, the current code places a border over the entire menu, with individual list items on top of that. #menu ul li { margin ...

cssmenuhover

JavaScript code that activates several hovering elements

I am a beginner in the world of JavaScript and I'm attempting to create a simple function that will activate multiple div hover effects. I have tried various approaches so far, but I believe this code is closer to the solution. Any assistance from som ...

javascriptjqueryhtmlcsstriggers

Using JavaScript, iterate over an array to generate input fields and assign values, with the last item in the array pop

I'm working with a div containing the id "inputs" in my HTML file, along with the following JavaScript code: let countries = [ {country: "Honduras", script: `<script src="crazy dog eats drool"> 'cha cha'` }, {country: "Chile", ...

javascripthtml

Leveraging JavaScript to trigger onClick() functions for multiple buttons throughout a webpage

        While searching for solutions, I came across several articles with similar topics, but unfortunately, none of the proposed solutions worked. Please forgive me if it was due to my own error. Background I am assisting a client who is transition ...

javascripthtmleventsdownloaditeration

What are the steps to integrate mp3 music into my web application?

Does anyone have experience implementing auto-resume mp3 music on a web application so that the music continues to play even when the user changes pages? I would like the music to seamlessly play as the user navigates through my web application. Can someo ...

javascriptphpjqueryhtmljson

Executing a custom object function in AngularJS by using the ng-click directive

As I navigate my way through AngularJS, I find myself grappling with the concept of calling a custom method of an object and wonder if there's a simpler approach: https://jsfiddle.net/f4ew9csr/3/ <div ng-app="myApp" ng-controller="myCtrl as myCtr ...

javascriptjqueryhtmlangularjs

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

The order of CSS precedence shifts even when the class sequence is the same

In my development setup, I have a react component that is embedded within two distinct applications each with their own webpack configurations. Within the component, I am utilizing a FontAwesome icon using the react-fontawesome library: <FontAwesom ...

javascriptcssreactjswebpackfont-awesome

Can animations be stacked in a queue while using velocity.js?

I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items o ...

javascriptjquerycssanimationvelocity.js

Tips on styling div elements to act as table cells

Is there a way to style divs with ids 1&2 and have the inner divs act like a table? Specifically, I want the first column to display a label, the second column to display an input field, and the third column to display a button. I attempted to adjust ...

htmlcss

Tips for dynamically changing the style (color/fill) of material-ui elements when generating them within a map function

I am struggling to dynamically change the style (colors) of elements in list items generated from a map function that includes rgb-color values. While using classes can work, trying to dynamically set the style based on the data/color provided in the objec ...

cssreact-nativematerial-ui

Steps for inserting a button within a table

Currently, I have implemented a function that dynamically adds the appropriate number of cells to the bottom of my table when a button is clicked. This is the JavaScript code for adding a row: <a href="javascript:myFunction();" title="addRow" class= ...

javascriptjqueryhtmltwitter-bootstrap

I'm having trouble getting my HTML button to redirect to a PHP link

I'm attempting to call a PHP script from my HTML file. Here's the snippet of my HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...

phphtmlweb

How to set a custom height for Mat-form-field in Angular 8 using pixel values

Is there a way to adjust the height of mat-form-field when using appearance="outline" to a specific pixel measurement, such as 40px (or any other value required by the UX team in the future)? I need to decrease the size of the mat-form-field. How can this ...

cssangulartypescriptangular-materialangular8

Shift a div towards the right edge of the navigation bar

**I am looking to reposition the Navbar_icon div to be on the right side of the navbar. The Navbar_icon contains icons for search, help, and sign in. ** Current layout of the navbar is shown in the image below: <https://i.sstatic.net/GGvBa.png> REA ...

htmlcssreactjs

Is CodeMirror's PHP mode failing to function properly?

There seems to be an issue with displaying the highlighted text, and I'm not sure why. Links: <link rel=stylesheet href="http://codemirror.net/mode/php/../../doc/docs.css"> <link rel="stylesheet" href="http://codemirror.net/mode/php/../../l ...

phpcsscodemirror

Add some TD(s) after the td element

The HTML code I currently have is as follows: <tr> <td class="success" rowspan="1">Viability</td> <td data-rowh="-Checksum">Viability-Checksum</td> </tr> <tr> ...

javascriptjqueryhtml

Swimming Left and Right Arrows

I am struggling to create a layout where images are stacked horizontally, with small arrows centered vertically on the left and right sides for scrolling. However, the arrows are currently centered relative to the page, rather than to the center image. I ...

htmlcssbootstrap-4