Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Sep 2012
    Posts
    4
    Member #
    32735
    So i have a background image that i set it photoshop at 1280x800 which is my screen resolution. I used it as a background image in dreamweaver cs5, but when i view it in safari it crops the background a lot, and then if i make the safari window smaller, the background stays the same size and doesn't give me the scroll ability that a webpage would normally give you. so my questions are

    1.what resolution should i use and how do i set it?

    2.is it something i should set in photoshop or is there a way in dreamweaver? i've tried multiple resolutions and all of them crop drastically in safari when i preview.

    3.how do i add the scroll ability when the page is made smaller in safari?

    4.how would i go about setting the background to adjust depending on what resolution screen is viewing my site? i've read a lot about using percentages but i'd like a little further explanation, i've used a couple of the percentage code online but none of them worked properly.

    thank you so much for your time everyone

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    1. All of them. In your CSS
    2. CSS
    3. That all depends on the size of your content, not the size of the background
    4. http://www.w3schools.com/cssref/css3...round-size.asp Not supported in IE8 and below
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Sep 2012
    Posts
    4
    Member #
    32735
    Quote Originally Posted by Ronald Roe, post: 240927
    1. All of them. In your CSS
    2. CSS
    3. That all depends on the size of your content, not the size of the background
    4. http://www.w3schools.com/cssref/css3...round-size.asp Not supported in IE8 and below
    I googled about using multiple resolutions in css and couldn't find anything, could you give me an example of what the code looks like?
    thank you

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    That's kinda the thing. Don't design for given screen resolutions. The days of 960px websites are gone. Aside from a whole lot of different sizes, you also have situations where the user doesn't have their browser maximized. Instead, design your site so that when the viewport changes size, the design reacts to it ("responsive" design).

    To specifically answer your question, media queries are what you're looking for. They'll allow you to set break points where elements will change their size/position/whatever based on the size of the viewport.

    The code looks something like so:
    Code:
    @media screen and (max-width:720px){
      div{
       width:70%;
      }
    }
    In this example, the width of the div will be 70% for any viewport size below 720px wide.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    All good points, one I try to mention and keep in mind myself.

    Who is your target market of the site ? Mobile design is always something to keep in mind when you're in that phase. If your target market is of a techie nature or of the younger generation and the content is something that people would access on the go, then your design should also work on mobile devices.

    Slicing and dicing images as a way to build websites is kinda old school. Sure you'll find lots of people still doing it that way, because it's easy to create a "pretty" site that way, but usability will build a bigger following faster than pretty every day.

    Mobile device usage is only going to rise, so any new design and or design styles should be considered. It's actually not that difficult in the big scheme of things... If you can make a responsive design, it can go mobile too.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com