What is the best way to add a gradient to the bottom left corner?

As I work with the Divi Theme from Elegant Themes, I am attempting to add a gradient behind the text in my full-width slider module. However, I am encountering an issue where the gradient does not align properly starting from the left side of the image.

When I include the gradient in my code, it seems to affect the position of the text as well. Can anyone provide assistance in resolving this problem? Below is the code snippet that I have been using:

<div style="padding: 0px;">
    <strong>&nbsp;</strong>

    &nbsp;

    &nbsp;

    &nbsp;

    &nbsp;

    &nbsp;

    <span style="color: #ffffff;">
        <strong>
            <span style="font-family: 'Times New Roman'; font-size: 54px; background: rgba(0, 0, 0, 0.5); padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 75px;">
                The Tire Experts
            </span>
        </strong>
    </span>
</div>
jqueryhtmlcss

Answer №1

In my opinion, a perfect gradient background would be designed like this:

        .grad {

          background: rgb(240, 183, 161);

          background: -moz-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(240, 183, 161, 1)), color-stop(50%, rgba(140, 51, 16, 1)), color-stop(51%, rgba(117, 34, 1, 1)), color-stop(100%, rgba(191, 110, 78, 1)));

          background: -webkit-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: -o-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: -ms-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: linear-gradient(135deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=1);

        }
<div style="padding: 0px;">

  <strong>&nbsp;</strong>
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

  <span style="color: #ffffff;"><strong><span class="grad" style="font-family: 'Times New Roman'; 
        font-size: 54px;  padding-left: 20px; padding-right: 20px; padding-top: 20px; 
        padding-bottom: 75px;">The Tire Specialists</span>
  </strong>
  </span>

</div>

Additionally, you could effortlessly design your own personalized css gradient background using this fantastic website: It offers a user-friendly editor and generates the desired gradient's css output

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

Transforming a GIMP design into a fully functional webpage

How can I transform my GIMP design into an actual website? After reviewing some information, it appears that using GIMP might not be ideal for creating CSS. It is recommended to utilize a CSS/HTML editor instead. Exporting HTML/CSS with Inkscape or GIMP N ...

htmlcssgimp

"Is there a way to implement the functions of adding, editing, and deleting data in

When attempting to display a table using jQuery DataTable, I would like to add edit and delete buttons at the last column of each row. How can I ensure that the database is updated with every edit and delete action? Ajax Request Example: //Ajax to get id ...

jqueryajaxdatatables

Switching up the default font style within TinyMCE

After successfully changing the default font within the editor using the guidelines provided here, I have encountered a new issue. The original default font no longer appears in the font drop-down list. The previous default font was Verdana, and the new d ...

javascriptcssfontstinymcefont-face

Evaluating HTML code through Java with Selenium

Trying to figure out how to write Java code for testing HTML code is a bit confusing for me. I need to compare multiple strings on an HTML page that looks like this: name: xyzfoo standard: 5 division: C All of this information is hard-coded within < ...

htmlselenium

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Below is the HTML and JavaScript code that I am working with: function changeResult() { x = document.getElementById("dropdown-list").value; console.log((x)); } var qq; <select id="dropdown-list" onchange="changeResult()"> <option value="4 ...

javascripthtml

How to access a PHP include using data retrieved from a MySQL database?

I am currently in the process of developing a website that will be powered by a MySQL database. To simplify the structure of the URLs, I have decided to rewrite them to point to a single file. The file's layout is as follows: <html> <head&g ...

phpmysqlhtml

Steps to disable all fields if the previous field is set to its default value and the default value is currently selected

As a newcomer to AngularJS, I have successfully disabled fields based on previous field selections. However, my goal is to set the default value of "ALL" for all fields (country, state, city). If the country value is set to "ALL," then the state and city ...

htmlangularjs

Switching case in jQuery for JSON information retrievalWhen retrieving JSON information using jQuery,

As a newbie in the world of jQuery (and javascript), I kindly ask for mercy! :) I am currently working on retrieving information from a JSON database. I have set up a search box and found a solution for fetching the data successfully when entering the exa ...

javascriptjqueryjson

Creating the Modal Window Effect using CSS

My goal is to create a modal window using CSS. I am working on adding a stylish element for users who have JavaScript disabled, which will be displayed using the noscript tag. Here is what I currently have: <div id="ns-overlay"> <section ...

cssmodal-dialog

Issue with Javascript/Jquery functionality within a PHP script

I have been attempting to incorporate a multi-select feature (view at http://jsfiddle.net/eUDRV/318/) into my PHP webpage. While I am able to display the table as desired, pressing the buttons to move elements from one side to another does not trigger any ...

javascriptphpjqueryhtmlcss

Looking for a method to quickly send an email via "mailto" in CSS (or any web development language) without the need to open Outlook or Apple Mail?

I'm currently in the process of developing my own website which includes a contact form with a message box. However, when I click submit or send, it redirects me to my Outlook email where all the entered data is collected. I then have to click send ag ...

javascripthtmlcss

Is there a way to utilize jquery (ajaxForm plugin) to submit a form to an external website without refreshing to a new page?

I am currently in the process of setting up a form that will transmit the customer's name and email address to icontact, an application for managing email lists. All the necessary fields are correctly configured for icontact, and when I submit the fo ...

jqueryajaxformspluginsajaxform

Validating with jQuery and Regex Patterns

I am in need of a regular expression that matches numbers starting with 0 and having a length of 11 digits. I have found a regular expression for matching numbers, but it does not account for the length and the requirement for the number to start with 0. ...

javascriptjqueryregex

Guide on properly formatting arithmetic expressions in a TextView for TalkBack recognition

In search of a way to make a fitness app more accessible, I need assistance in displaying a message on a smartwatch emulator that can be easily understood by users utilizing the TalkBack feature. The challenge lies in ensuring that the word 'plus&apos ...

javaandroidhtmlkotlin

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

angularhtmltypescriptangular5

I'd like to display just two names from a list at a time and have the option to click on a button to reveal the next two names, unfortunately, there

I am trying to modify my code so that it only displays the first 2 items in an array initially, and then on clicking a button, the next 2 names are displayed until the end. However, the code I have written seems to have a bug. Can you help me correct this ...

htmlcssknockout.js

Please select an HTML file to upload and preview it using Thymeleaf before finalizing the upload

I'm currently working on a Spring Boot project that utilizes Thymeleaf for the front end. I want to allow users to upload a plain HTML file and also display a preview of the HTML file before uploading. While I've found options for previewing imag ...

javascriptjavahtmljquerythymeleaf

Locating the element idNumber within the following HTML snippet

<div id="rightContent" style="display: inline-block; width: 700px; vertical-align: top;"> <div> <h1><em class="SomethingHeading">Something</em></h1> </div> <d ...

javahtmlxpathselenium-webdriverselenium-chromedriver

How can a button be linked directly to a particular list item?

I currently have a HTML tag within my React application that looks something like this: <ul> <li> Item 1 <button> Delete </button> </li> <li> Item 2 <button> ...

javascripthtmlreactjs

Is it possible for the logo in the div and the height of the div to vanish after 10 seconds?

Is it possible to conceal a div along with its logo? I currently have a jpeg logo displayed at the top of my website, but I would like it to vanish after 10 seconds and have the text below it shift upward to fill the space. I've managed to hide the ...

javascriptjqueryhtmlcss