How to set the zoom level of an entire site in any browser

This question is not about how a user would set the zoom level of a page depending on the browser they are using at the time. I am referring to something in CSS like zoom: 90% in CSS or some js or some other code. I realize a page can be designed and built responsively, or just reduced, but this is not such a design, the site it built and I don't want to rebuild the site. I'm lazy I guess.

This site has content with a background image. I want the users to see more of the background image on desktops and portable devices. It would be like Control and + or - keys on your keyboard to zoom out, but I want the site to open and remain at a specific zoom level lower than 100% or 0 unless the user chooses to zoom in. Is this possible? I tried
body { zoom: 88%; } but it doesn't work. The site is html5.
weknowjackAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
weknowjackConnect With a Mentor Author Commented:
I just learned about the CSS transform property and it works in most browsers.

#container {
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -o-transform: scale(0.85);
    -ms-transform: scale(0.85);
}
0
 
Dave BaldwinFixer of ProblemsCommented:
Zoom is just a user function.  There is nothing in HTML or CSS to control it.
0
 
Dave BaldwinFixer of ProblemsCommented:
That's interesting.  Here is a page about 'transform' along with some demos: http://www.w3schools.com/cssref/css3_pr_transform.asp  I would imagine the user's 'zoom' function could still over-ride that.
0
 
weknowjackAuthor Commented:
Thanks for your replies Dave. Yes, the user can override it which is fine. It also has some browser limitations but good enough as is for my purposes.
0
 
weknowjackAuthor Commented:
The only comment I received was incorrect. I did further research and found the right answer myself.
0
All Courses

From novice to tech pro — start learning today.