Background gets smaller and divs get under each other while changing screen size

问题

AS you can see from the title I have two questions. First question is very simple, I have this css code for the background:

body{
display:block;
background:url(file:///C:/Users/Abdallah/Desktop/Background%20images/Fotor0512155059.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position-y:27px;
margin:0;
}

All I want is that when I get the screen smaller(CTRL -) the background stays on full screen and does NOT get smaller so there will be white space. Second question is simple too. I have some divs near each other and I want when I get the screen bigger(CTRL +) the divs stays near each other and does NOT get under each other.

Here's example(http://jsfiddle.net/njmFT/) if you get the screen bigger (CTRL +) the black boxes get under each others, if you get the screen smaller (CTRL -) the background get smaller and you can see white space. Any suggestions?

回答1:

In answer to your first question, I think you might be looking for

body{
    padding:0;
    margin:0;
    background: #ffffff url(file:///C:/Users/Abdallah/Desktop/Background%20images/Fotor0512155059.jpg) no-repeat center top;
    background-attachment:fixed;
    background-size:cover;
}

It's the background-size property that's doing the business but be careful - the support through the browsers is only relatively recent.

Also, remember to us an absolute or relative URL for the img resource when you upload it otherwise you will see the background image but your visitors won't!

Working on your second problem now!

EDIT.

OK... some ideas about your second question

I think if you start using percentages instead of fixed pixel widths for your boxes. Try something like

.box{
    background-color:#000;
    width:20%;
    padding:0;
    margin:0 2%;
    height:100px;
    display:inline-block;
}

BTW - you shouldn't use multiple identical IDs in the same page - use class="box" and .box{} instead of id="box" and #box{}

Fiddle here - http://jsfiddle.net/em5Ga/

Sorry - bad link to fiddle - updated!

来源：https://stackoverflow.com/questions/16520783/background-gets-smaller-and-divs-get-under-each-other-while-changing-screen-size

标签

css

html

background

screen