CODEWITHSUNDEEP
csstextbackground-imageborder
Miami Bass
Miami Bass

Reputation: 13

Insert text in border CSS HTML

I need to insert text in the upper and lower of an inner border (both centred) which will have a background image behind it. This will be the same on each page. Can I achieve this using CSS?

Please see screenshot of what I mean:

enter image description here

The border needs to be 3px in width and white in colour and the font is Basis Grotesque Medium.

I'm hoping to start out with a WordPress theme and edit it.

Hopefully this question hasn't been answered before anywhere. I tried running a search but couldn't find what I needed.

Before I go ahead and start building this website could you tell me if this is possible and how I may go about achieving it?

Upvotes: 1

Views: 8033

Answers (1)

web-tiki
web-tiki

Reputation: 103810

You can use the approach I described here Line separator under text and transparent background for the lines on the left/right of the titles.

You can then use negative top/bottom margin to position them on the bottom and top borders :

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
  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 need tweaking according to the font-family you are using

Upvotes: 2

Related Questions