CODEWITHSUNDEEP
htmlcssaspect-ratio
Miller90
Miller90

Reputation: 21

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

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

Upvotes: 0

Views: 270

Answers (2)

Subhash Bagul
Subhash Bagul

Reputation: 11

Use,

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

Upvotes: 1

Exception
Exception

Reputation: 8379

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

Upvotes: 0

Related Questions