How to set background image to keep its position while browser width is changing?

Question

I am wondering how I could set the background image to keep its position on this site: http://www.jylkkari.fi/wordpress/

When you drag the browser under 960 px wide, the background of sidebar starts to move towards center.

I found out this Javascript which could solve this problem.

I am still searching if there is a easy way in CSS to keep the image centered while browser width is more than 960 px and on fixed while it is under this size?

Rohit Azad Malik · Accepted Answer · 2012-10-02T09:31:28.997

0

.......................... Define your body

min-width:980px;

body{
min-width:980px;
}

--------------for ie

used to ie condition css as like this

 <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

create a css file

body{width:980px;}

more info about ie css click here

edited Oct 02 '12 at 09:31

answered Oct 02 '12 at 08:47

Rohit Azad Malik

31,410
17
69
97

I got it, but there is time limit going on. – Ipi Oct 02 '12 at 08:58
You should be careful where you want to use min-width. In IE it's not supported. You should set width also in case you're going to show the page in IE<8. – Marcio Oct 02 '12 at 09:05
Do you have any advice, how to make it for the IE<8? – Ipi Oct 02 '12 at 09:27

score 0 · Answer 2 · answered Oct 02 '12 at 08:48

0

Do this by adding width: 960px; to the element the background statement is on (in your case this would be body).

answered Oct 02 '12 at 08:48

ranieuwe

2,268
1
24
30

score 0 · Answer 3 · answered Oct 02 '12 at 08:58

0

You can use a media query, to change the CSS of the body when it reaches a certain width:

@media all and (max-width: 960px) {
  body {
    background-position: left center;
  }
}

answered Oct 02 '12 at 08:58

LeonardChallis

7,759
6
45
76

How to set background image to keep its position while browser width is changing?

3 Answers3