• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1199
  • Last Modified:

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

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?
1 Solution
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.
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.
Uber_msAuthor Commented:
Here is a link, so you can see what I mean:

I posted the code to try out and you haven't tried it, so saying "no one is helping" is a little harsh.
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now