creating a website that can scale down and scale up no matter the screen size

Question

i am creating a website on my mac book 13 inch the background image i am trying to use is too big for my screen is their a way to keep the aspect ratio the same when developing on my screen so it will look the same scaled up or scaled down

i have used this code to scale the background image to fill the whole screen

background: url(images/background.jpg) no-repeat center center fixed; 
    background-size: cover;
    background-size: cover;
    background-size: cover;
    background-size: cover;

i have used a page wrap to wrap the content

#wrapper {margin: 0 auto 0 auto; width:1070px;height:auto;

but it just comes out over lapping the image which is not ment to happen the ration is off because the wrapper is the same width as the space left for it but it overlaps the background image is 1772x1240 the width of the green box is 1070 is their a way of designing and keeping those ratios

Can you post a code example of your problem on jsfiddle perhaps? http://jsfiddle.net — Michael Giovanni Pumo, Feb 15 '13 at 17:08

Subhash Bagul · Answer 1 · 2013-02-23T11:38:16.427

1

Use,

background:url(images/background.jpg) 0 0 no-repeat; 
background-position:fixed;background-size:100%;

edited Feb 23 '13 at 11:38

answered Feb 15 '13 at 17:15

Subhash Bagul

11
3

score 0 · Accepted Answer · answered Feb 15 '13 at 17:22

I am not specific to requirement, but if you are really looking for something that is reusable layout, then follow this. It works in all modern browsers

HTML

  <div class="table">
    <div class='row'>
      <div class='cell'>1</div>
      <div class='cell'>2</div>
      <div class='cell'>3</div>
      <div class='cell'>4</div>
    </div>
  </div>

CSS:

  .table{
     height: 50px;
     width:100%;
     background-color:Red;
     display:table;
     table-layout:fixed;
  }
  .row{
     display:table-row
  }
  .cell{
     display:table-cell;
     line-height:50px;
     text-align:center;
  }

And a Demo, try to resize the page

this has worked to some extent as in the table but i want the bacground image to behave in that nature i have not got enough respect points to post images as yet — Miller90, Feb 18 '13 at 14:41

creating a website that can scale down and scale up no matter the screen size

2 Answers2