StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to do centered <h1> with <hr/> on both sides over a background image
primarykey
Id
16027223
data
AcceptedAnswerId
16028515
AnswerCount
4
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-04-16T01:18:48.933
FavoriteCount
1
LastActivityDate
2014-12-23T12:31:17.493
LastEditDate
2017-05-23T12:08:05.467
LastEditorUserId
-1
OwnerUserId
242
ParentId
0
PostTypeId
1
Score
0
ViewCount
3034
LastEditorDisplayName
text
Body
<p>How do I create centered <code><h1></code> with <code><hr/></code> on both sides <strong><em>over a background image</em></strong>? </p> <p>I also need it to handle various text lengths, scale well for mobile viewing and have the <code><hr/></code> go to 100% width of its container.</p> <p>I want this look, but over a background image. <img src="https://i.stack.imgur.com/ahA8W.png" alt="text on solid background"></p> <p>There are lots of answers (<a href="https://stackoverflow.com/q/2812770/242">here</a>, <a href="https://stackoverflow.com/q/9033823/242">here</a> <a href="https://stackoverflow.com/q/9015309/242">here</a> and <a href="https://stackoverflow.com/q/12648513/242">here</a>) for text with lines on either side but all of them rely on using a solid background colour behind the text, which doesn't work for me as the page I want to put this on has a background image. </p> <p>Here is how I achieve the look above, which handles various lengths of text and scales well:</p> <p><strong>CSS</strong></p> <pre><code>.title-box { height: 2px; background-color: rgb(215, 0, 0); text-align: center; } .title-outer { background-color:rgb(230, 230, 230); position: relative; top: -0.7em; } .title-inner { margin:0px 20px; font-size: 17.5px; font-weight:bold; color:rgb(100, 100, 100); } </code></pre> <p><strong>HTML</strong></p> <pre><code><div class="title-box"> <span class="title-outer"> <span class="title-inner">OUR STORY</span> </span> </div> </code></pre> <p>I have tried the method below and it <em>kind of</em> works but it doesn't handle various text widths or scale well due to the <code><h1></code> and the <code><hr/></code>s being in seperate <code><div></code>s:</p> <p><img src="https://i.stack.imgur.com/hXsMh.png" alt="text on background image"></p> <p><strong>HTML</strong></p> <pre><code><div class="row"> <div class="span4"><hr /></div> <div class="span4"><h4>OUR STORY</h4></div> <div class="span4"><hr /></div> </div> </code></pre> <p><em>Note: This is example is using the Bootstrap grid system but that is not part of the problem/solution.</em></p> <p>So any ideas how I can get the same look and behaviour but without the backgound colour for the text so it can sit over a background image?</p>
Tags
<html><css><background-image>
Title
How to do centered <h1> with <hr/> on both sides over a background image
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USDhaust
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
2. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
3. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.