How to align text with a horizontally striped background

So when I try to expand my window the text is out of place and I would like the text to be consistently aligned with the background:

This is what I have for my background in css:

body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  -webkit-app-region: drag;
 background-image: linear-gradient(0deg, #171717 25%, #0f0f0f 25%, #0f0f0f 50%, #171717 50%, 
 #171717 75%, #0f0f0f 75%, #0f0f0f 100%);
 background-size: 80.00px 80.00px;
 height:700px;
 width:400px;

}


#textBlock {
    position:absolute;
    bottom:0;
    font-size:12px;
    color:white;
}

  <div id= "textBlock">
     <p style="display:inline;"></p>text1<br>
     <p style="display:inline;" >text2</p><br>
     <p style="display:inline;">text3 </p><br>
     <p style="display:inline;" >text4</p><br>
  </div>

Hi,
You won’t have much luck with px font-sizes and percentage gradiants.
It will work with ems though, to some extent. It works in this simple test case where all the text is the same size. It would be a problem when you get headings with larger font sizes and various margins on your containers.

All font sizes and margins would need to be confined to your gradient formula.

It’s best to get rid of the absolute positioning, stay in the page flow.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text on gradient background</title>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(180deg, #171717, #171717 1.5em, #0f0f0f 1.5em, #0f0f0f 3em);
  background-size: 3em 3em;
  margin: 0;
}
.text {
  width: 80%;
  max-width: 600px;
  margin: 1.5em auto;
  /*outline: 1px dashed red;*/
}
.text p {
  font-size: 1em;
  line-height: 1.5;
  color: white;
  margin: 0 .5em;
}
</style>

</head>
<body>

<div class="text">
  <p>Text descenders play a role in your line-height.</p>
  <p>New line of text in paragraph 2.</p>
  <p>More content in paragraph 3.<br> Text from paragraph 3 wrapping to a new line.</p>
  <p>Last line of text.</p>
</div>

</body>
</html>

text-on-gradient

4 Likes

Hi jijuniyuxu and a warm welcome to the forum.

Can you expand upon what you mean in the quote?

As @Ray.H suggested… To see what is happening when the screen changes size please remove the remmed CSS to reveal the dotted border and also add the dotted border to your script and notice the difference.

1 Like

I think using a background gardient for this is a fragile approach as it will always be independant to the text elements.
Much better to apply different backgrounds directly to the alternate elements. This is where the nth-child selector comes in.

1 Like

… or

.text p:nth-child(odd)  {  /* or (even) */
  background: #0f0f0f;
}

smile

1 Like

The solution, here is more about math + typography.

As has been said before, PX units are going to really back you against the corner. so I would use ems instead of px.

Another thing thats lovely complicating thing is generating more than one shading cycle in your bg image.

you will also want to get rid of ( or at least synchronize the body element’s padding and margin).

you also dont need the BR tags or to force the P tags into being inline.

With that said:
Your bg size will be the calculated line height * the # of shades in the cycle ( in this case 2).

rough example:

 <html>
	<head>
		<title>d</title>
		<style type="text/css" media="screen">
 body {
   font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  -webkit-app-region: drag;
 background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0 ,rgba(0,0,0,.5) 50%, rgba(0,0,0,1) 50% ,rgba(0,0,0,1) 100% ); /* this cycle contains 2 shades*/
 background-size: 3em 3em; /* lineheight * # of shades in cylce*/
 height:700px;
 width:400px;
 padding: 1.5em 1em ; /* syncronized padding*/
 margin:0;

}


#textBlock {
    color:white;
line-height: 1.5
}


#textBlock p{
	font-size: 100%;
	padding: 0 ;
	margin:0 0 1.5em 0;
	
	}		
	
	</style>
 	</head>
	<body>
		  <div id= "textBlock">
      <p   >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p  >text3 </p>
     <p  >text4</p>
  </div>
	</body>
</html>

hope that helps :slight_smile:

I should have clarified, what I was looking for was @Ray.H posted but that code snippet wasn’t exactly working. So I tried this:

body {
   font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  -webkit-app-region: drag;
 background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0 ,rgba(0,0,0,.5) 50%, rgba(0,0,0,1) 50% ,rgba(0,0,0,1) 100% ); /* this cycle contains 2 shades*/
 background-size: 3em 3em; /* lineheight * # of shades in cylce*/

 margin:0;

}

.textBlock {
    color:white;
line-height: 2em
}


.textBlock p{
	font-size: 100%;
	padding: 0 ;
	margin:0 0 1em 0;
  

  <div class="textBlock">
    <p>Text descenders play a role in your line-height.</p>
    <p>New line of text in paragraph 2.</p>
    <p>More content in paragraph </p>
    <p>Last line of text.</p>
  </div>

So far, the output is that the text is displayed on the black lines only. But I would like to see the text displayed on both shades.

Thanks

1 Like

Hi,
Your background stripes are 1.5em tall so you need to work with that formula for your line heights and margins. I had mentioned that earlier…

I said font-size, but line-height is what I intended to say.

So keeping with your 1.5em stripe height theses changes should work for you.

.textBlock {
  color:white;
  line-height: 1.5em; /*changed from 2em*/
}


.textBlock p{
  font-size: 100%;
  padding: 0 ;
  margin:0 0 1.5em 0; /*changed from 1em*/
}

stripe-text

If you want text on every line then you need to remove the p tag margin. If you do that then all text will look like one large paragraph which could be confusing.

Hi Ray,

So this is what I have so far with your updated snippet:

body {
  -webkit-user-select: none;
 -webkit-app-region: drag;
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(180deg, #171717, #171717 1em, #0f0f0f 1em, #0f0f0f 2em);
  background-size: 2em 2em;
  margin: 0;
}

.textBlock {
  color:white;
  line-height: 1.5em; /*changed from 2em*/
}


.textBlock p{
  font-size: 100%;
  padding: 0 ;
  margin:0 0 1.5em 0; /*changed from 1em*/
}

And this is the out put I have so far:
image

As you can see the text is skipping every two lines when I don’t want the text skipping at all.

If you want text on every line then you need to remove the p tag margin. If you do that then all text will look like

Which I did by deleting the margin:0 0 1.5em 0; line entirely the text doesn’t line up to the background.

If you delete it entirely it reverts back to the browser default margins.
Set it to   margin: 0;

If you delete it entirely it reverts back to the browser default margins.
Set it to margin: 0;

It’s still doesn’t align with that change, I’m not sure why:

image

It may have to do with the linear gradient I changed to:
background-image: linear-gradient(180deg, #171717, #171717 1em, #0f0f0f 1em, #0f0f0f 2em);

Since the I want the height of the shades identical to the height of the text.

Yes it does.
You changed it to 2em from 3em

The 1.5em line-height is half of 3em

The 1.5em line-height is half of 3em

Right but since I would like the height of the shades identical to the height of the text, wouldn’t I have to change the line height to 1em?

If that is the case, it still doesn’t align:

image

Default line-height is 1.2 if I remember correctly. That is for 1em font size. The extra .2 allows for text descenders. That’s why setting your line height the same as your font size causes problems.

If you want it minimized then work with 1.2 line height for 1em text.
So your background stripes would be 1.2 em each.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text on gradient background</title>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: linear-gradient(180deg, #171717, #171717 1.2em, #0f0f0f 1.2em, #0f0f0f 3em);
  background-size: 2.4em 2.4em;
  margin: 0;
}
.text {
  width: 80%;
  max-width: 600px;
  margin: 1.2em auto;
  /*outline: 1px dashed red;*/
}
.text p {
  font-size: 1em;
  line-height: 1.2;
  color: white;
  margin: 0 .5em;
}
</style>

</head>
<body>

<div class="text">
  <p>Text descenders play a role in your line-height.</p>
  <p>New line of text in paragraph 2.</p>
  <p>More content in paragraph 3.<br> Text from paragraph 3 wrapping to a new line.</p>
  <p>Last line of text.</p>
</div>

</body>
</html>

Stripes at 1.2
2

1 Like

I used your code block but I don’t get the same result:

image

Then you must have inserted some different rules somewhere as Rays code doesn’t display like that.

You will need to post the full code you are using or better still wrap it into a codepen so that no guesswork is involved:)

Works on codepen for @Ray.H’s code. I ended it up switching the line height to 1.1em and it worked. Thanks @Ray.H!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.