Solution 1 :

If I understood your requirement correctly, is this what you want?

.paragraph {
        background-image: url("http://placekitten.com/301/301");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color:yellow;   
        font-size:20px;
        height:50px; /* this is just to show the image fit-in */
    }
<p class="paragraph">
This is paragraph
</p>

Solution 2 :

What you are looking for is

background-size: 100% 100%;

to strech the image in both directions to fit the div.
Furthermore your image has a transparent border which couses your text to go outside the blue border.

Using backround-size: cover forces the image to be scaled but preserving the aspect ratio, so parts of the image will be cut off, if your element does not match the aspect ratio of the image.

You could use padding or use css instad of the background image. For example somethink like the following. An alternative would also be a border with gradient.

https://jsfiddle.net/1ju5vkyw/

[EDIT]

Explanaition:
before and after are pseudoelements, the browser is creating them automaticaly. So, when you have the following markup:

...
<style>
  .test::before{
    content: "";
  }
  .test::after{
    content: "";
  }
</style>

<div class="test">
    <div></div>
</div>
...

it will be something like this:

<div class="test">
    <div:before></div:before>
    <div></div>
    <div:after></div:after>
</div>

You can style before and after like a normal html element and because their position is inside the div you know, where they will be on screen.
To achieve the effect of your image i took a close look at the image. It has 2 colors (2px small border and another border around it) and rounded borders and a box shadow. So i styled before and after as divs with the background colors of the border of your image, make the one 4px bigger then the div (2px on each side) and the other 20px bigger (10px on each side) positioned them relative to the content div and make them apear behinde it. Then the outer one got a box shadow in css and all togehter it looks like your background image.

body {
background-image: url("https://cdn.discordapp.com/attachments/704268108759695460/708284755820412938/Text-Effect-No1-bkg.png");
background-repeat: no-repeat;
background-size: cover;
}

.title {
	font-family: Accuratist, Ariel, serif;
	font-style: normal;
	color: orange;
	font-size: 250%;
	text-align: center;
}

.subtitle {
	font-family: Accuratist, Airel, serif;
	font-style: normal;
	color: orange;
	font-size: 200%;
	text-align: center;
}

.paragraph {
  	width: 75%;
  	display: block;
  	margin: auto;
	font-family: Accuratist, Ariel, serif;
	font-style: normal;
	color: orange;
	font-size: 100%;
	text-align: center;
  background-color: #060922;
  position: relative;
  border-radius: 25px;
  padding: 5px;
}

.paragraph::before {
  	position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    left: -10px;
    background-color: #103454;
    content: "";
    z-index: -2;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

.paragraph::after {
  	position: absolute;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    background-color: #294F6C;
    content: "";
    z-index: -1;
    border-radius: 25px;
}
<html>
<head>
<meta charset="ISO-8859-1">
<title>Something</title>
</head>
<body>
	<jsp:include page="NavBar.jsp"></jsp:include>
	<h1 class="title">Title</h1>
	<h2 class="subtitle">Sbtitle</h2>
	<br/>
		<p class="paragraph"><br/>
			Hello World<br/>
			The image extends downards whenever I line down.<br/>
			But if I write an extrememly long line, the words will get out of the image's boundires and rip it looks really really weird as you can see.<br/>
			Also, the top and botton of the image does not show up (I will show you the original image) which is weird considering I used cover on bg size...<br/><br/></p>
</body>
</html>

Solution 3 :

Normally I do that putting the paragraph inside one div

<div id class="background-image" >
<p> Paragraph about things and Hello world's </p>
</div>

<style>
.background-image{
        background-image: url("../../res/images/Plate.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
}
</style>

other way is using the

.background-image {
        display:block;
        background-image: url("");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding:2rem;
        height:200px;
        width: 100%;
}

confirm if the path is correct ../../res/images/Plate.png, try copy the image to the css folder only to see if u can link it correctly

Problem :

I want to make a CSS class that will contain a background image around the element that’s applied to it, so if I apply it to a paragraph element(p) it will put the image on the element and write the text inside the image, I tried a couple of times but I couldn’t find nor create that. This is what I have so far:

.paragraph {
        background-image: url("../../res/images/Plate.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

this is how it looks like for me(the top and bottom of the image don’t show up):

enter image description here

Code:

body {
background-image: url("https://cdn.discordapp.com/attachments/704268108759695460/708284755820412938/Text-Effect-No1-bkg.png");
background-repeat: no-repeat;
background-size: cover;
}

.title {
	font-family: Accuratist, Ariel, serif;
	font-style: normal;
	color: orange;
	font-size: 250%;
	text-align: center;
}

.subtitle {
	font-family: Accuratist, Airel, serif;
	font-style: normal;
	color: orange;
	font-size: 200%;
	text-align: center;
}

.paragraph {
  	background-image: url("https://cdn.discordapp.com/attachments/704268108759695460/708284745024405504/Text-Effect-No1-Plate.png");
  	width: 75%;
  	display: block;
  	margin: auto;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	font-family: Accuratist, Ariel, serif;
	font-style: normal;
	color: orange;
	font-size: 100%;
	text-align: center;
	align-self: center;
}
<html>
<head>
<meta charset="ISO-8859-1">
<title>Something</title>
</head>
<body>
	<jsp:include page="NavBar.jsp"></jsp:include>
	<h1 class="title">Title</h1>
	<h2 class="subtitle">Sbtitle</h2>
	<br/>
		<p class="paragraph"><br/>
			Hello World<br/>
			The image extends downards whenever I line down.<br/>
			But if I write an extrememly long line, the words will get out of the image's boundires and rip it looks really really weird as you can see.<br/>
			Also, the top and botton of the image does not show up (I will show you the original image) which is weird considering I used cover on bg size...<br/><br/></p>
</body>
</html>

Note:

Since the images are on my PC so I didn’t use the paths in the css here I just put them on discord and used the links lol, but the paths are correct because the images do display soo.. yeah.

Original Image:

enter image description here

Comments

Comment posted by Manjuboyz

So what is the expected result? text over image inside

Comment posted by Adeel Tahir

Check the path of your image and make sure you have applied this paragraph class to an element.

Comment posted by 1Mangomaster1

The path is correct, the image displays but not the entire image which is weird because I do put cover in size…

Comment posted by Jarlik Stepsto

your image has a transparent border, so when it is matching the whole box, sthe blue border is not at the borders of your div (and therefore your text does not match it). Further if you want your image to to stretched to full div size user background-size: 100% 100%; to let your text be inside the blue border use padding

Comment posted by Jarlik Stepsto

for an alternative to your image see my jsfiddle link in my answer i just posted 🙂

Comment posted by 1Mangomaster1

Not quite… I wanted the picture to stretch depends on the length of the paragraph, I didn’t manage to pull it perfectly, but I did something very close already. But thank you for your help 🙂

Comment posted by Manjuboyz

when you say length of the paragraph does that mean the paragraph container or just the length of the text? we can fix that if you need help.

Comment posted by 1Mangomaster1

My problem is, when I go one row down it extends there, but if the text in a row is too long it won’t extend and it only shows the sides of the image(as you can see in the image I sent above) but not the top and bottom, the original image is basically like a frame that has a color inside that fits the site’s color theme

Comment posted by Manjuboyz

I lost the explanation, can you add the image directly so that I can download and check things? or if there is anyway if you can add that in the snippet would be helpful.

Comment posted by 1Mangomaster1

I didn’t quite understand your CSS code, it proves it works and I am not an expert with CSS but what does the ::before and ::after mean? and I noticed you don’t use a picture at all so how do you create that effect?

Comment posted by Jarlik Stepsto

@RoeeHerzovich i added some explanation to my post, read the ‘edit’ part.

Comment posted by 1Mangomaster1

This solution only shows parts of the image, the more I write the more of the image reveals(altho we use cover which is weird) so it doesn’t really work for me. What I usually see stretching is the sides altho I don’t see the top and bottom of the image

By

Leave a Reply

Your email address will not be published. Required fields are marked *