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?
In answer to your first question, I think you might be looking for
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
BTW - you shouldn't use multiple identical IDs in the same page - use
class="box"
and.box{}
instead ofid="box"
and#box{}
Fiddle here - http://jsfiddle.net/em5Ga/
Sorry - bad link to fiddle - updated!