0

Part of site I'm working on p tag over a background image:

enter image description here

I've set the background color for the tag and also the padding but for whatever reason I cant just get it to be a solid block of color behind the text

Bharata
  • 13,509
  • 6
  • 36
  • 50
Andrew Ericson
  • 39
  • 1
  • 5
  • 3
    Could you post the HTML and CSS you're using in a code snippet? – hmiedema9 Aug 02 '18 at 16:27
  • can you upload an image with developer tools on the `p` tag please – Mike Trinh Aug 02 '18 at 16:29
  • yeah here you go. Its a bit of a mess. – Andrew Ericson Aug 02 '18 at 16:32
  • https://imgur.com/iAtTNmB – Andrew Ericson Aug 02 '18 at 16:32
  • Just figured out my problem! I just had to clear out a lot of the extra stuff that was making things more complicated. – Andrew Ericson Aug 02 '18 at 16:48
  • [**Do not post images of code or errors!**](https://meta.stackoverflow.com/q/303812/995714) Images and screenshots can be a nice addition to a post, but please make sure the post is still cle ar and useful without them. If you post images of code or error messages make sure you also copy and paste or type the actual code/message into the post directly. – Rob Aug 02 '18 at 17:10

3 Answers3

1

span {
 font-size: 2.2rem;
}
.bg-pad {    
 background: #c0392b;
 color: #fff;
 line-height: 3rem;
}
<span class="bg-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quisquam quas nesciunt quaerat consequatur, illum ipsa accusamus, optio molestias quae id autem praesentium quia, nostrum quis, velit dolorem. Magni, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quisquam quas nesciunt quaerat consequatur, illum ipsa accusamus, optio molestias quae id autem praesentium quia, nostrum quis, velit dolorem. Magni, magnam.</span>
Ram Chandra Neupane
  • 1,826
  • 3
  • 19
  • 36
0

p {

  padding: 5px;
  background-color: red;
  }
  
span {

  background: #c0392b;
 color: #fff;
 line-height: 3rem;
  }
<p>
lor ut congue egestas, odio urna facilisis tortor, sed tempor ex metus at leo. Maecenas ac sem ut ante porta sodales.</p>


<span>lor ut congue egestas, odio urna facilisis tortor, sed tempor ex metus at leo. Maecenas ac sem ut ante porta sodales.<span>

Hi, You just have to put the padding and the color in CSS to apply the style. if you wanted you could also determine the background of the text as "background-color: transparent" and achieve a different effect.

Pekee
  • 177
  • 1
  • 8
0

you can place your paragraph inside a div. and set background to this

div{
  background:orange;
  color:white;
}
section{
  background:url(https://picsum.photos/458/354);
  height:200px;
}
<section>
<div>
<p>Any text wth long description, you can write anything here becuase i have a background form div. and i will not longer see you space behind me.Any text wth long description, you can write anything here becuase i have a background form div. and i will not longer see you space behind me.Any text wth long description, you can write anything here becuase i have a background form div. and i will not longer see you space behind me.

</p>
</div>
</section>