What is the best way to show a background image behind the heading text?

I have a strip of images that I want to use as a background for my heading.

However, I am encountering an issue where the first and last images of the strip are not displaying properly. Additionally, the image border appears straight instead of following the strip's design.

.red_strip {
  background-image: url('http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png');
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
  width: 100%;
}
<div class="heading">
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod tempor incididunt ut <span class="red_strip">labore et dolore magna aliqua.</span></h2>


  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod <span class="red_strip">tempor incididunt ut labore et dolore magna aliqua.</span></h2>

  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /><span class="red_strip"> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></h2>


</div>

htmlcssbackground-imagehtml-heading

Answer №1

Revise the red_strip class to:

.red_strip {
  background-image: url(http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

The background-size: 100% 100%; property will extend the background image both horizontally and vertically.

.red_strip {
  background-image: url(http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
<div class="heading">
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod tempor incididunt ut <span class="red_strip">labore et dolore magna aliqua.</span></h2>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod <span class="red_strip">tempor incididunt ut labore et dolore magna aliqua.</span></h2>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /><span class="red_strip"> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></h2>
</div>

Answer №2

Here's the solution:

background-size:  102% 102%;

   .red_strip {
                    background-image: url('http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png');
                    background-size: 102% 102%;
                    background-repeat: repeat;
                    background-position: center;
                    width: 100%;
                }

Answer №3

.design  {
padding-left:25px;
background:url(http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png) no-repeat top left;
display: inline-block;
background-size:100% 100%;
color:white;
}
<div class="heading">
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod tempor incididunt ut <span class="design">labore et dolore magna aliqua.</span></h2>


  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod <span class="design">tempor incididunt ut labore et dolore magna aliqua.</span></h2>

  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /><span class="design"> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></h2>


</div>

Answer №4

Include the class="red_strip" in your heading tag like this: 

<h2 class="red_strip"> 
// Insert your text here
</h2>

Be sure to remove <span class="red_strip">

Remember to set your background-size as background-size: 100% 100%

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

Tips for displaying a div element inline with precision?

I have HTML code to create multiple small boxes, each with a name retrieved from an object called graphdata. <div ng-repeat="a in graphdata" class="inline"> <div class="legend-box"style="background-color:{{a.color}};"> </div> ...

htmlcssangularjsionic-framework

Exploring the versatility of Angular 4 by implementing a switch feature with

My goal is to have the menu change based on the click of the "Cadastros" action, but it seems like the issue lies with the "workspaceSelected" property not being visible to all components. I believe the best approach in this situation would be to have the ...

htmlangulartypescript

"Hovering over one div does not trigger the display of another div

I seem to have forgotten my CSS skills, but I am facing an issue. Here is the code snippet: <div class="footer_container"> <div class="website_logo_to_footerexpand"></div> <div class="info_cont"> <div class ...

htmlcss

How to automatically open JQuery Accordion panels when the page loads

My Accordion loads with the 1st panel open upon page load, but I am looking for a way to have the entire Accordion closed by default. Any help or suggestions on how to achieve this would be highly appreciated. Thank you for your assistance. FIDDLE http:// ...

javascriptjqueryhtmlcss

Aligning the email form to the center with the text-align center property:

I'm in the process of creating an app landing page using the Bootstrap framework (Bootstrap 4 alpha). I have used text-align:center in the jumbotron id to center everything, but the email form is not aligning properly. Is there a way to center align ...

htmlcssflexboxtwitter-bootstrap-4

Exploring discrepancies between two tables with the power of Javascript

const firstTable = document.getElementById('table_1') const secondTable = document.getElementById('table_2') const rows1 = firstTable.rows const rows2 = secondTable.rows for (let i = 0; i < rows1.length; i++) { for (let x in rows ...

javascripthtmljquerycss

Transform the color of Max Mega Menu items on hover with another item in WordPress

Seeking help to change the color of my megamenu item when hovering over other items in the menu. Take a look at this image for reference: I've tried using these CSS styles but it didn't work as expected. #mega-menu-wrap-primary-menu #mega-menu-p ...

csswordpresswordpress-themingmegamenu

tips for reducing the size of the recaptcha image to display just one word

The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...

phpcssrecaptcha

disabling responsiveness in Bootstrap 2

I am facing an issue with Bootstrap version 2 where I am unable to fix the grid layout. Even after wrapping all my HTML elements in a container, the layout still behaves unpredictably on different screen sizes. Here is a snippet of my code: <header> ...

htmlcsstwitter-bootstrap

HTML5: Implementing shared web workers for efficient communication across multiple connections

As far as I know, one of the main advantages of HTML5's shared web workers is their ability to handle multiple connections within a single separate thread of execution. I'm curious if anyone has managed to achieve multiple connections working as ...

htmlconnectionweb-worker

What is the best way to horizontally align a button with CSS?

I need help with positioning a button on my web page. The button looks great, but it's currently off to the left and I want it centered below the main text. Any suggestions on how to achieve this? <!DOCTYPE html> <html lang=""> <head& ...

htmlcssbutton

Updating Button Text with PHP on WooCommerce

Hi there, I'm trying to find a way to translate a button in my WooCommerce store without using LocoTranslate or any other tools. Is there a PHP function that can help me change the button text without needing an ID? If you want to take a look at the ...

phpcssbuttonwoocommerce

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

htmlcssangularangular-material

Populating the DOM with a mix of strings and HTMLDivElements by iterating through an array using *ngFor

I have a specific layout requirement that needs to resemble this example: https://i.sstatic.net/4kP2q.png The desired layout should utilize CSS properties like display: grid; someFunction(data) { this.data = data; ...

htmlangulartypescriptinnerhtmlngfor

Switch out a static full-page image background for an engaging HTML5 video

Is there a simple method to switch out a full-page image background with a video? video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) tr ...

csshtmlhtml5-video

Issue with the for loop functionality in a less CSS mixin

After observing that a section of Less that I believed was functioning correctly is not producing all the styles I require, I realized that my for loop is not functioning properly. The specific less code snippet in question is: .for(@list, @code) { & ...

cssnpmgruntjsless

Utilizing Bootstrap 5 with either a 16 or 24 column grid system minus the need for Sass

I'm looking for assistance in adjusting Bootstrap 5 to have either a 16 or 24 column grid rather than the default 12 columns. I attempted using Bootstrap Customize but found it to be an older version. I want the flexibility to change the grid from 12 ...

htmlcsstwitter-bootstrapbootstrap-5

What's the best way to prevent extra spacing when typing in a materialUI TextField?

Instructions for the user: Please input your first name without any spaces between characters. I attempted to implement the following code, however, it did not achieve the desired outcome. <TextField required id="name" label="First Name" ...

javascripthtmlreactjsmaterial-ui

Retrieving Information From SVG Files

I have this code snippet saved in a local HTML file: <object id="PriceAdvisorFrame" type="image/svg+xml" data="https://www.kbb.com/Api/3.9.448.0/71071/vehicle/upa/PriceAdvisor/meter.svg?action=Get&amp;intent=buy-used&amp;pricetype=Private Party ...

pythonhtmlseleniumbeautifulsoup

python code to locate element using selenium

Currently, I am utilizing selenium in conjunction with Python to automate tasks. I am facing an issue where I have a checkbox element that I need to click on, but the only information I have about it is the text it contains. The text is located within a &l ...

pythonhtmlseleniumcheckboxhtml-table