www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to automatically adjust to optimal zoom for user

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    How to automatically adjust to optimal zoom for user

    I recently made a website with a background image I made in photoshop. The problem is that my image fits my resolution, however it looks uneven and incomplete on screens of smaller resolutions. Those screens simply have to zoom out once or twice for the website to look how I want it to. Therefore my question is, how would I have the zoom of their browser automatically adjust to optimal zoom for my website?

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    You are going to find it VERY difficult to auto adjust the "zoom" for every resolution.
    For example... what about resolutions that are LARGER than your resolution? ... and I don't want you messing with my "zoom"?
    While it's relatively easy to completely fill any resolution with a 100% background image... just be careful what you ask for!
    Why not post the actual page here so we can comment.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  3. #3
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    This article might help. The solution there uses CSS3 so it only works in newer browsers.

  4. #4
    Join Date
    Mar 2012
    Posts
    2
    Thanks for the replies. I did post the page but it was removed.

    Thank you for that article I think it will prove to be exactly what I am looking for.

  5. #5
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Code:
    body {
    	background: url(../img/sideimage1.jpg) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	font-family: ‘Times New Roman’, Times, serif;
    	line-height: 180%;
    	font-size: 14pt;
    	color: #000;
    		}
    I used the cover attribute in CSS3 to make the image cover the whole screen no matter what. It only works in new browsers though, but honestly people should be updating their browsers anyways
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles