То, что вы ищете, - это
background-size: 100% 100%;
, чтобы растянуть изображение в обоих направлениях, чтобы оно соответствовало div. Кроме того, ваше изображение имеет прозрачную рамку, которая превращает ваш текст в go за пределами синей границы.
Использование backround-size: cover заставляет изображение масштабироваться, но с сохранением соотношения сторон, поэтому части изображения будут обрезаны off, если ваш элемент не соответствует соотношению сторон изображения.
Вы можете использовать отступы или css вместо фонового изображения. Например, что-то вроде следующего. Альтернативой может быть граница с градиентом.
https://jsfiddle.net/1ju5vkyw/
[EDIT]
Пояснение: перед и после псевдоэлементов браузер создает их автоматически. Итак, если у вас есть следующая разметка:
...
<style>
.test::before{
content: "";
}
.test::after{
content: "";
}
</style>
<div class="test">
<div></div>
</div>
...
, это будет примерно так:
<div class="test">
<div:before></div:before>
<div></div>
<div:after></div:after>
</div>
Вы можете стилизовать до и после, как обычный элемент html, и потому что их позиция находится внутри известного вам div, где они будут на экране. Чтобы добиться эффекта вашего изображения, я внимательно посмотрел на изображение. Он имеет 2 цвета (маленькая рамка 2 пикселя и еще одна граница вокруг нее), закругленные границы и тень блока. Итак, я стилизовал до и после как div с цветами фона границы вашего изображения, сделав один на 4 пикселя больше, чем div (2 пикселя с каждой стороны), а другой на 20 пикселей больше (по 10 пикселей с каждой стороны) разместил их относительно содержимого. div и сделайте так, чтобы они выглядели за ним. Затем внешний получил тень блока в css, и все вместе это выглядит как ваше фоновое изображение.
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>