How to create "dynamic" background based on user screen resolution?

Posted on 2009-02-08
Last Modified: 2013-12-20
I'm very new to web programing. My church paid a web company to mock up a website with Photoshop but didn't have the money to finish the project. I volunteered to help. I have the Photoshop files that I sliced and saved to HTML. I can create links and such in Dreamweaver, but for the life of me I cannot figure out how to make the side images "dynamic". By dynamic I mean the size changes based on the resolution of the computer running the web browser. Now the screen is focused on the top left corner of the page instead of top center where the actual content is. Any help?
Question by:Uber_ms
    LVL 2

    Expert Comment

    Trying to force the images to change based on the viewers screen resolution would be very hard to achieve if you are new to web programming...and would take a lot of time. Try to stick to static pages instead of dynamic pages for now if you need to get this site done soon.

    If you must, the easiest way to do this is to create an html table with two cells, one with fixed and one with percentage-based cell width. Then set the image to stretch to 100% within the percentage-based width cell (unfortunately,by doing it this way, the image quality will suffer based on different screen resolutions). The "correct" way to change the image sizes would probably involve creating an Adobe flash UI, or at least something that resamples the imagery in realtime as the screen resolution or browser window size is changed.
    LVL 25

    Expert Comment

    If you want your layout to be centered in the page, then you must put the content inside a 'container' that is then made central.

    Like this:

      <div class="container">
           All your existing layout now goes here

    To make the container central, within your style sheet add this rule:

    .container {width:950px; margin:0 auto;}

    Obviously the container here is set to be 950 pixels wide, so you should amend this to make it fit what you already have.
    LVL 1

    Author Comment

    Here is a link, so you can see what I mean:
    LVL 25

    Accepted Solution

    I posted the code to try out and you haven't tried it, so saying "no one is helping" is a little harsh.

    Expert Comment

    use some js to add a differnt style sheet like:
    var winW=0,winH=0;
                   document.write('<link rel="stylesheet" type="text/css" href="/sites/all/themes/website-theme/style-640px.css">')
              else if(winW<=780){
                   document.write('<link rel="stylesheet" type="text/css" href="/sites/all/themes/website-theme/style-640px.css">')
              else if(winW<=1000){
                   document.write('<link rel="stylesheet" type="text/css" href="/sites/all/themes/website-theme/style-800px.css">')
             else if(winW<=1200){
                  document.write('<link rel="stylesheet" type="text/css" href="/sites/all/themes/website-theme/style-1024px.css">')

    Open in new window


    Featured Post

    Gigs: Get Your Project Delivered by an Expert

    Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

    Join & Write a Comment

    Suggested Solutions

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now