2

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>
Naren Verma
  • 2,205
  • 5
  • 38
  • 95
  • To prevent cuting of you image you need background-size `contain` – Awais Dec 10 '19 at 06:54
  • add `padding: 0 15px` to `.red_strip`. – Praveen Dec 10 '19 at 06:57
  • I tried to contain but it's not working as expected. It's displaying link https://prnt.sc/q8nhix – Naren Verma Dec 10 '19 at 06:57
  • just remove 'background-size: cover;' from '.red_strip' class, this should solve your problem – Sarvesh Mahajan Dec 10 '19 at 07:00
  • Did you check your code by adding padding? – Praveen Dec 10 '19 at 07:13
  • @PullataPraveen, Yes, I checked using padding, it's giving some space from left to right but the border of the image is show straight which is not correct. – Naren Verma Dec 10 '19 at 07:15
  • @NarenVerma First thing is that you should never use that much size of image for `inline-block` elements. My suggestion for you is to reduce the width and height of an image and try. – Praveen Dec 10 '19 at 07:19
  • @NarenVerma I hope my answer will work for u. https://stackoverflow.com/questions/59261697/how-to-display-the-background-image-behind-heading-text/59261956#59261956 – Nitheesh Dec 10 '19 at 07:21

4 Answers4

1

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%;
                }
Nikhil S
  • 3,786
  • 4
  • 18
  • 32
  • Give me some time to check this – Naren Verma Dec 10 '19 at 07:08
  • 1
    I tried your answer, It's also working but not 100% If I use 102% the changing little bit border and also I use no-repeat and remove the position. same as nitheesh answer. Upvote from my side – Naren Verma Dec 10 '19 at 07:32
  • @NarenVerma my answer and Nitheesh's answer are the same and I answered 4 minutes prior to his .Dont know why didnt get the green tick. I used 102% so that the image contains the whole text. although, thanks!! – Nikhil S Dec 10 '19 at 07:46
  • Yes, Your answer is first and added the explanation in the about comment. – Naren Verma Dec 10 '19 at 08:03
1

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>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49
0

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%

Regolith
  • 2,944
  • 9
  • 33
  • 50
Suraj Parise
  • 330
  • 3
  • 18
0

.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>
Aikansh Mann
  • 606
  • 6
  • 12