CODEWITHSUNDEEP
htmlcssbackground-imagehtml-heading
Naren Verma
Naren Verma

Reputation: 2307

How to display the background image behind heading text?

I have an image strip and I have to display that image as a background of my heading.

I tried but I am getting one issue and the issue is, the first edge and last edge are not displaying properly. I mean starting image and end images are not displaying properly. Also, image border displaying straight.

.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>

Upvotes: 2

Views: 797

Answers (4)

Suraj Parise
Suraj Parise

Reputation: 340

Use this class="red_strip" in heading tag like: 

<h2 class="red_strip"> 
// Your text
</h2>

Remove <span class="red_strip">

Also make sure your background-size should be background-size: 100% 100%

Upvotes: 0

Aikansh Mann
Aikansh Mann

Reputation: 666

.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>

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 19986

Update red_strip class as

.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;
}

background-size: 100% 100%; property will stretch the background image 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>

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

This will do :

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%;
                }

Upvotes: 1

Related Questions