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:
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>
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>
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
Related
I have a page with a full-screen background that has some blocks with a black background on it. I would like to achieve that the text in those black blocks looks like it's cut out from the black box so you can see the background image.
Below is a simplified version of the HTML and CSS set-up:
.background {
background-image: url(https://picsum.photos/200/300);
height: 100vh;
width: 100vw;
}
.blackbox {
background-color: black;
padding: 30px;
display: inline-block;
margin-top: 100px;
margin-left: 400px;
}
.text {
font-size: 40px;
font-weight: bold;
font-family: 'Helvetica', 'Arial', sans-serif;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: url(https://picsum.photos/200/300);
}
<div class="background">
<div class="blackbox">
<div class="text">TEXT</div>
</div>
</div>
If I move the background image to the child text element, the clipping works but it doesn't match with the background-image on the parent element. I thought this question had my answer but the child element doesn't have a background.
This should be responsive. mix-blend-mode is what you're looking for:
Source (https://www.w3schools.com/howto/howto_css_cutout_text.asp)
.background {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png);
background-size: cover;
position: relative;
height: 200px;
}
.text {
background-color: black;
color: white;
font-size: 5vw;
font-weight: bold;
margin: 0 auto;
padding: 0 15px 0 15px;
text-align: center;
position: absolute;
height: 200px;
line-height: 200px;
mix-blend-mode: multiply; /* This makes the cutout text possible */
}
<div class="background">
<div class="text">TEXT</div>
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>
Home - Hasan's Website
</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 1px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
</body>
</html>
I got some help from someone and they used Bootstrap which the teacher did not allow. The bootstrap makes the words not compressed against each other. What can I do to achieve the same purpose without the bootstrap? Like I want to remove the bootstrap, but the title "Computer Engineering," then just compresses. How can remove the bootstrap, but still have the words still properly spaced out? Any help will be greatly appreciated! This is for my Grade 11 Engineering class.
I'm not giving a straight forward solution. But, a way to find the solution in your own way.
Run the page with bootstrap styles included. Open the page a modern browser like Google Chrome. Right click on the element in which you are interested & select Inspect element from the context menu. Now, you can see the CSS properties contributing to the look & feel of the element you are inspecting.
Copy those properties to your own project. Done.
That is happening due to
body, html{
line-height : 1.8em;
}
Just add line-height : 1em; in h1. It should solve the problem.
I'm getting started with BootStrap 3 and trying to use a background image with text on it. At same time I want it to be reponsive but it seems there is some issue with the way I implemented it. I'm able to get it work for normal desktop but when I try to emulate on a mobile device, text goes outside of background image.
http://jsfiddle.net/cn5guyt4/2/
<div id="front-landing">
<div class="container jumbotron hero-unit">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.hero-unit {
position: relative;
margin-bottom: 0;
margin-top: 15px;
background: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg') 50% 80% no-repeat;
background-size: 100%;
min-height: 700px;
}
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}
Can someone help me to figure out what am I doing wrong here ?
Thanks
In your hero-unit class, the background-size set to 100% but it should be cover instead. That made a huge difference: see bootply.
I think what you are really trying to do is get the jumbotron of bootstrap to have a background picture. Why is your jsfiddle code different from the code you posted here? there is a wild margin of difference. My fix is using the code above.
Working bootply
<div id="front-landing">
<div class="container jumbotron ">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.jumbotron{
background-image: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg');
background-size: cover;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}
you can set image as a background-image
.imageAndText img{
width: 100%;
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
for text you can use col-xs-12 or work write individual media query
I have this image on my website, but when I zoom with the scroll, the image becomes blurred. So, what I need it is not resize when I zoom.
This is my CSS code:
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
The image must be repeated on the screen.
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
img{
max-width: 100%;
height: auto;
}
You might want to try something like this and see if it works.
I have <h1> with image before and after it.
It works fine within all webpages, but now I have some additional headings with two lines.
So, I need to style <h1> with two lines.
If I use the existing style with image before and after then text align is a problem.
You can test it in jsfiddle: http://jsfiddle.net/kw3KX/
Or see it in realtime webpage (a bit modified): http://modeles-de-lettres.org/test/
You can see that <h1> with two lines contains text "Some text here" and "about this site" and alignment is a problem.
HTML:
<div id="content-wrapper">
<h1>
Some text here
</h1>
</div>
CSS:
h1 {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #5d5d5d;
margin: 41px 0 32px 0;
}
h1:before {
background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png');
background-repeat: no-repeat;
padding: 0 152px 0 0;
}
#content-wrapper {
width: 1000px;
margin: 0px auto;
position: relative;
}
So is it possible to fix it somehow with <h1> tag?
This is beeing caused by the float you apply to the :before and :after elements.
I would advise you to postion the images absolute instead. This lifts the images out of the document flow, and they can no longer influence the other elements (and mess up your text). This way your layout will keep working, no matter the number of lines in your h1.
I updated your fiddle: http://jsfiddle.net/kw3KX/2/
and the relevant css:
h1 {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #5d5d5d;
margin: 41px 0 32px 0;
position: relative; /* added so the position absolute will work */
}
h1:before {
background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png');
background-repeat: no-repeat;
background-position: center left;
padding: 0 317px 0 0;
content:"\00a0";
/* added */
position: absolute;
left: 0;
top: 50%;
margin-top: -7px; /* half the height of the image, to center it */
}
h1:after {
background-image: url('http://modeles-de-lettres.org/test/images/h_rtl.png');
background-repeat: no-repeat;
background-position: center right;
padding: 0 317px 0 0;
content:"\00a0";
/* added */
position: absolute;
right: 0;
top: 50%;
margin-top: -7px; /* half the height of the image, to center it */
}
you may wrap the text in a span and do display: inline-block; for that span, and do some margin-top to adjust the alignment with the images:
<h1>
<span style="display:inline-block; margin-top:-16px;">Some text here<br>
about this site</span>
</h1>
Use the white-space property: white-space:pre;
FIDDLE