0

enter image description here

Hi there,

This is in regards to the image I posted above. I feel like it's something that should be easy, but I just can't figure it out. I basically have a DIV that is the container with the darker see through BG and inside it I have some text that's centered. To the left and right of the text I have these horizontal lines of equal width.

Now the trick is that those horizontal lines, change their width based on how much text I have in the middle so there's always the same "padding" around the sides of the text. It's important to note that the background is not a flat color, but an image and the container with the darker BG is see through. If it was a flat color I could just add a thick shadow to the text of the same color as the BG and just have that line be the background of that DIV all the way through in which case the shadow of the text would make it look as its interrupted behind the text. The container also has a dynamic width, something like 80% for example.

Anyone have any idea how I could get this done? Thank you very much in advance!

stefanplc
  • 419
  • 9
  • 22
  • 1
    This image is result what u have to make? put here your code. – Deathmras Jul 23 '14 at 18:30
  • 1
    maybe [this](http://css-tricks.com/line-on-sides-headers/) can give you an idea. Or [this](http://stackoverflow.com/questions/15557627/css-title-with-horizontal-line-on-either-side) – Frakcool Jul 23 '14 at 18:37
  • 1
    I've had this fiddle in my bookmarks for a while. Does exactly what you need: http://jsfiddle.net/attenzione/MeDDM/ – JoeJ Jul 23 '14 at 18:38

1 Answers1

3

You can use pseudo element and rgba() colors, this is a common way to do it : DEMO

HTML test

<header>
  <h1> MY CENTERED TEXT</h1>
</header>

CSS test 

header {
  padding:3em;
  background:url(http://lorempixel.com/600/50/nightlife) ;
  background-size: cover;
}
h1 {
  background:rgba(0,0,0,0.5);
  color:white;
  padding:1em 0;
  text-align:center;
  overflow:hidden;
}
h1:before, h1:after {
  content:'';
  width:100%;
  border-bottom:lightgray solid;
  display:inline-block;
  vertical-align:middle;
}
h1:before {
  margin-left:-100%;}
h1:after {
  margin-right:-100%;}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • how would I increase the padding around the text? so basically increase the space from the text to the side lines. thank you very much in advance! – stefanplc Jul 24 '14 at 12:41
  • 2
    @stefanplc you can add a margin towards the text. http://codepen.io/anon/pen/crCgb `h1:before { margin-left:-100%; margin-right:1em;} h1:after { margin-right:-100%; margin-left:1em;}` – G-Cyrillus Jul 24 '14 at 12:48