Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Making font size resize and move with width of screen of the image

    Hi I have a website that requires the image to cover the width and height of the page. The problem is that I need to place the font in locations on the screen that match the design. So for instance in the below example I would love for the contact text to appear on the white paper to the right and remain there and resize as the screen does, shown here:

    http://www.begraphics.com/sites/krm/indextest.php

    I have researched something called BigText but doesn't quite do what I need it to do.

    Is what I have mentioned possible, any help or advice would be great?

    Thanks

    Eddie

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,301
    Thanks
    10
    Thanked 283 Times in 282 Posts
    You would need to specify that contactarea's positioning such that it is always over the paper. For large page sizes, it looks like it might be possible (something lik left:80%, bottom:20%), but as your page gets smaller, the background stops shrinking, so I suspect a media query at that breakpoint would be the answer, and you could then specify the contactarea's position at a more fixed point, as you are now.

    As far as the font size, you can specify that as a percentage also. It's going to look rather odd, but if that's what you want...

    It may be cleaner to just put the text into the background image, by editing the image directly. It sounds like that might be what you're looking for.
    Last edited by tracknut; 01-28-2014 at 02:45 PM.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,323
    Thanks
    23
    Thanked 615 Times in 614 Posts
    Just an observation Eddie_E, but your page looks like it was based around javascript and not HTML. When JS is removed your background-image is just the bottom part of the image, but the page width shrinks smoothly. Something that does not happen with the JS in place.

    So as a place to start I'd re-code without JS and try adding the text to the image using percents to position it or something like that.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    you would want to anchor the image in the bottom right, otherwise that paper corner jumps all around any relative positions you define.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for your responses, tracknut the positioning helped keep it to the right. I scrapped the font size reduce, I will be creating a custom mobile version so don't need to worry about too small screens. Sunfighter this page is just a snippet from the main website which uses js to create a page scroll effect with the other pages.

    Cheers

    Eddie


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •