Home Forums Archived Forums Not Theme Related Text over image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #18107


    How do I place text over an image(in the body as opposed to in the header) like in tyler.com ? There were some hints in the forum pages about using CSS in the Advanced Options / <Head> Section. I could not understand the cryptic hints. Could someone provide a step by step instructions on how we could achieve that? Thanks.

    This is VERY hard to do correctly.

    The “standard” way is to use absolute positioning.

    The real problem (and it is a problem and should NOT be ignored), is that using standard CSS to try to accomplish this is not responsive – the text gets all screwed up on smaller screens and looks awful.

    The best solution in our experience is to use a photo editor and place the text over the images. This doesn’t work well if you have constant text with changing images.

    But, this is not really theme related, but is an HTML/CSS/JavaScript issue. Weaver allows you to have “raw” pages if you need a bunch of specialized HTML, but that is the extent of theme help for this sort of styling issue.

    So the basic HTML would look like
    <div style=”position:relative;float:left;”><img src=”imageurl”/>
    <div style=”position:absolute;left:5%;top:5%;”>Your text</div>

    Many thanks for your help. It works!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘ Not Theme Related’ is closed to new topics and replies.