I need to paste the text in the center into the upper and lower border, which will have a background image behind them. It will be on every page. Can I achieve this with CSS ?

Please see a screenshot of what I mean:

enter image description here

The border should be white, 3 pixels wide, and the font should be Basis Grotesque Medium .

I hope to start by editing the WordPress theme.

I hope that this question was not answered elsewhere. I tried to search, but could not find what I needed.

Before you go ahead and start building this site, could you tell me if this is possible, how can I achieve this?

Source: Insert text in border CSS HTML

2 answers 2

I will add my 5 kopecks ...

 body { background-image: url(https://avatars.mds.yandex.net/get-pdb/1016956/27ec7a52-f169-49d8-b895-10a84386bb8b/s1200); background-repeat: no-repeat; } fieldset { border: 3px solid white; border-bottom: none; color: white; } fieldset+fieldset { transform: rotatex(180deg); } fieldset+fieldset>legend { transform: rotatex(180deg); } fieldset>p:last-child { margin-bottom: 0; } 
 <fieldset> <legend align="center">Lorem</legend> <p>...content...</p> </fieldset> <fieldset> <legend align="center">Ipsum</legend> </fieldset>

  • Please add another background, if everything is ok, with pleasure I wouldn’t have written a comment if I knew how to act in a situation where this topic goes within the framework - by the association ENSO - Alexandr_TT
  • @Alexandr_T for God's sake ... - Andrey Fedorov

You can use the approach I described here - Line separator - on the line to the left / right of the name.

You can then use the negative top/bottom margin fields, and place them at the lower and upper bounds:

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300); body { background-image: url(https://avatars.mds.yandex.net/get-pdb/1016956/27ec7a52-f169-49d8-b895-10a84386bb8b/s1200); background-repeat: no-repeat; background-size: cover; font-family: 'Open Sans', sans-serif; color:#fff; } #content{ border:3px solid #fff; border-width:0 3px; display:inline-block; margin:50px 0; width:100%; } .divider { font-size:30px; margin: -0.65em auto -0.45em; overflow: hidden; text-align: center; line-height: 1.2em; } .divider:before, .divider:after { content: ""; vertical-align: top; display: inline-block; width: 50%; height: 0.65em; border-bottom: 3px solid #fff; margin: 0 2% 0 -55%; } .divider:after { margin: 0 -55% 0 2%; } p{margin: 150px 0;} 
 <div id="content"> <h1 class="divider">Top title</h1> <p>...Content here...</p> <h2 class="divider">Bottom title</h2> </div>

Note that top/bottom negative margins will require fine tuning of the font family you are using.