How to make a CSS class that contains a background image

Question

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):

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:

So what is the expected result? text over image inside p tag? if so I don't see any issues with your code. — Manjuboyz
– Manjuboyz, Commented May 7, 2020 at 15:02
Check the path of your image and make sure you have applied this paragraph class to an element. — Adeel Tahir
– Adeel Tahir, Commented May 7, 2020 at 15:09
The path is correct, the image displays but not the entire image which is weird because I do put cover in size... — 1Mangomaster1
– 1Mangomaster1, Commented May 7, 2020 at 15:15
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 — Jarlik Stepsto
– Jarlik Stepsto, Commented May 8, 2020 at 12:19
for an alternative to your image see my jsfiddle link in my answer i just posted :) — Jarlik Stepsto
– Jarlik Stepsto, Commented May 8, 2020 at 12:43

Manjuboyz · Accepted Answer · 2020-05-08 03:38:34Z

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>

answered May 8, 2020 at 3:38

Manjuboyz

7,1043 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

1Mangomaster1 Over a year ago

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 :)

Manjuboyz Over a year ago

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.

1Mangomaster1 Over a year ago

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

Manjuboyz Over a year ago

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.

Jarlik Stepsto · Accepted Answer · 2020-05-11 06:35:33Z

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>

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?
@RoeeHerzovich i added some explanation to my post, read the 'edit' part.

Rafael Pires · Accepted Answer · 2020-05-07 15:01:59Z

-1

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

answered May 7, 2020 at 15:01

Rafael Pires

356 bronze badges

1 Comment

1Mangomaster1 Over a year ago

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

Collectives™ on Stack Overflow

How to make a CSS class that contains a background image

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related