1

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?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Miami Bass
  • 13
  • 1
  • 3

1 Answers1

2

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

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Wow. Thanks web-tiki for such a quick reply. I wasn't expecting that! What you've suggested looks perfect. I hope I can somehow insert this into a WordPress theme and make it work. Do you have any idea if this would be responsive across different platforms, or is that down to which WordPress theme I use? Many thanks for your help! – Miami Bass May 11 '15 at 10:13
  • @MiamiBass this solution is responsive. You should all the same test it on your build and see if there aren't any class overrides or conflicting CSS rules. – web-tiki May 11 '15 at 10:20
  • I'm having difficulty finding a theme that I can edit to make this border work. I tried giving it a go with http://templated.co/horizons but things got a bit messy. Do you know of any theme which is similar to what I need to build? I'm guessing you build all your sites from scratch, but thought I would ask on the off-chance you might know of something. Many thanks. – Miami Bass May 11 '15 at 22:43
  • It seems I can't find any themes which have a border like this. I've looked through hundreds! – Miami Bass May 11 '15 at 23:22
  • @MiamiBass This solution should work on any template. Implementing it can be hard depending on the way the template is made but I don't know which one you should choose. – web-tiki May 12 '15 at 06:37