I am trying to help out with a website (http://www.chetekinteriors.com/wordpress) - the background image is what features the column - it is ran by the css settings in a theme I purchased.

For some reason, when I edit the CSS settings for the background image display properties, it shows fine on my mac but on windows and smaller computers the background image placement is wrong.

If I resize my browser window the image changes as well - are there any CSS styles that could help me fix this so that everything is universal on all browsers and computers?

If anyone could help me I would really appreciate it so much...

The website is chetekinteriors.com/wordpress - Attached is my CSS coding:

html, body, form,
h1, h2, h3, h4, h5, h6,
p, img, a
{
	margin:0;
	padding:0;
	outline:0;
	border:0;
}

body, textarea
{
	font-family:Tahoma!important;
	font-size:10px!important;
	letter-spacing:2px!important;
}
body
{
	background:#333;
	font-size:0.8em;
	color:#666666;
	line-height:175%;
}
#main
{
	background:#ffffff url(../images/idea_1.png)
	no-repeat!important;background-position:bottom-left!important;
	background-attachment:scroll!important;
background-position: 10% 0%!important; 

}
p, h1, h2, h3, h4, h5, h6
{
	padding:0 0 20px 0;
}
h1, h2, h3, h4, h5, h6
{
	color:#333;
	font-weight:normal;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
	text-decoration:none;
}
UL
{
	padding:0 0 0 20px;
	margin:0 0 20px 0;
}
UL LI
{
	padding-top:5px;
	padding-bottom:5px;
}
.post UL
{
	margin-left:30px;
}
h1 { font-size:2.7em;}
h2 { font-size:2.3em; }
h3 { font-size:1.9em; }
h4 { font-size:1.8em; }
h5 { font-size:1.7em; }
h6 { font-size:1.5em; }

A
{
	color:#333!important;
	font-family:verdana!important;
	font-size:9px!important;
	text-transform:uppercase!important;
	letter-spacing:3px!important;
	text-decoration:none!important;

}
A:hover
{
	color:#979797!important;
	background-position:1px 17px;
	font-family:verdana!important;
	font-size:9px!important;
	text-transform:uppercase!important;
	letter-spacing:3px!important;
	text-decoration:none!important;
}
A:visited
{
}
A:active
{
	color:#000;

	position:relative;
	top:1px;
}
#header
{
	padding:20px 0 16px 0;
}

/* Ad manager plugin */
.ads LI a
{
	display:block;
	text-align:center;
	margin:3px 0 10px 0;
	padding:5px 0;
	background:#fff;
}

/* WordPress Calendar Widget styles*/
#wp-calendar
{
	width:99%;
}
#wp-calendar caption
{
	font-weight:bold;
}
#wp-calendar td
{
	border-right:1px solid #eee;
	border-bottom:1px solid #eee;
	text-align:center;
}
#wp-calendar .pad,
#wp-calendar #prev,
#wp-calendar #next
{
	border:0;
}

.post .postmeta
{
	padding:2px 10px;
	line-height:150%;
	margin-bottom:8px;
	text-transform:uppercase;
	background:#f0f0f0;
	font-size:80%;
}

.post .posttitle
{
	padding-bottom:5px;
}
.post .postmeta a.comment-count
{
	font-weight:bold;
	display:block;
	float:right;
}

A.more-link
{
	margin-top:10px;
}
A.more-link,
.pagenavigation a
{
	text-decoration:none;
	padding:5px 10px;
	background:#f0f0f0;
	border:1px solid #ddd;
	font-weight:bold;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.pagenavigation a
{
	font-weight:normal;
	font-size:90%;
}
.post-thumbnail .wp-post-image
{
	display:block;
	margin:0 0 20px 0;
}

.widget-area
{
	padding:20px 0;
}
h2.widgettitle
{
	padding-bottom:10px;
	margin-bottom:5px;
	font-size:175%;
	border-bottom:1px solid #eee;
}
.sidebarwidget
{
	font-size:85%;
	margin-bottom:30px;
}
.footerwidget
{
	margin-bottom:0;
}
.footerwidget h2.widgettitle
{
	border-bottom:0;
}
.widget UL
{
	margin:0;
	padding:0 0 0 0;
}
.widget UL LI UL
{
	padding-left:15px;
}
.widget UL LI
{
	list-style-type:none;
	padding:1px 0;
}
#footer
{
	background:#333;
	color:#888;
	padding:15px 0 60px 0;
	font-size:0.85em;
}
#footer A
{
	color:#999;
}
#main .container_12
{
	padding-bottom:40px;
}

/* Latest Posts home page widget*/
UL.latest-posts LI A
{
	display:block;
	font-size:100%;
}
UL.latest-posts LI A
{
	text-decoration:none;
}
UL.latest-posts p
{
	padding-bottom:0;
}
.latest-posts span
{
	background:#d4d4d4;
	padding:1px 4px;
	font-size:0.8em;
	margin-right:10px;
	color:#fff;
}

/* Social Icons in Footer */
UL.social LI A
{
	margin:0 1px;
}

/* Shadows */
.latest-work-thumbs img,
.shadow,
.ads LI a,
#commentform #comment,
#commentform #author,
#commentform #email,
#commentform #url,
#commentform #submit
{
	-webkit-box-shadow: 0px 0px 2px #ddd;
	-moz-box-shadow: 0px 0px 2px #ddd;
}
.latest-work-thumbs img:hover,
.hovershadow:hover,
.ads LI a:hover,
OL.commentlist LI:hover .avatar,
#commentform #submit:hover,
.portfolio-thumbnail a:hover img
{
	-webkit-box-shadow: 0px 0px 6px #ccc;
	-moz-box-shadow: 0px 0px 6px #ccc;
}
.shadow-medium,
.wp-post-image,
.avatar
{
	-webkit-box-shadow: 0px 0px 3px #ddd;
	-moz-box-shadow: 0px 0px 3px #ddd;
}
.shadow-large
{
	-webkit-box-shadow: 0px 0px 4px #444;
	-moz-box-shadow: 0px 0px 4px #444;
}

/* HR Line */
hr
{
	background-image:url(../images/hr.gif);
	background-repeat:repeat-x;
	background-color:transparent;
	border:0;
	margin:20px 0;
	height:2px;
}
hr.nopad
{
	padding:0;
	margin:0;
}

/* Promo / Home Page Slider */
.promo-container
{
	margin-bottom:40px;
}
#promo-nav
{
	background:url(../images/promo_nav_bg.jpg) repeat-x bottom left;
	border:1px solid #dcdcdc;
	border-top:0;
	padding:12px 10px 10px 10px;
}
#promo-nav UL LI a
{
	border:1px solid #d4d4d4;
	background:#fff;
	text-indent:-9999px;
	width:8px;
	height:8px;
	display:block;
	float:left;
	margin-left:7px;
}
#promo-nav UL LI a:hover,
#promo-nav .activeSlide
{
	background:#d4d4d4;
}
#promo-nav UL LI a:active
{
	background:#333;
}

/* Searchform */
.toolbox-vertical
{
	margin-bottom:5px;
}
.toolbox-horizontal #searchform
{
	margin-top:46px;
}
#searchform form
{
	background:#f6f6f6;
	border:1px solid #e8e8e8;
	width:220px;
}
#searchform #s
{
	font-size:0.7em;
	padding:6px 0 4px 10px;
	color:#b9b9b9;
	text-transform:uppercase;
	text-align:left;
	width:175px;
}
#searchform #s,
#searchform #submit
{
	background:transparent;
	border:0;
}
UL.searchresults LI H5
{
	padding:5px 20px;
}

UL.clean, UL.clean LI
{
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline;
}
.alternate, .hidden
{
	display:none;
}
.right
{
	float:right;
}
.left
{
	float:left;
}

/* Generic WP Generated Classes */
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.alignleft {
   float: left;
}
.alignright {
   float: right;
}
img.alignleft
{
	margin:5px 20px 20px 0;
}
img.alignright
{
	margin:5px 0 20px 20px;
}
img.aligncenter
{
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #fff;
   padding:8px 3px;
   margin: 10px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.wp-caption img {
   margin: 0;
   padding:0 0 5px 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding:5px 0;
   padding:0;
   margin: 0;
}

/* COMMENT LIST AND FORM */
#commentform #comment,
#commentform #author,
#commentform #email,
#commentform #url,
#commentform #submit
{
	border:1px solid #ccc;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	padding:5px;
}
#commentform #submit
{
	font-weight:bold;
	margin-bottom:10px;
	color:#777;
	cursor:pointer;
}
#commentform #comment,
#commentform #author,
#commentform #email,
#commentform #url
{
	width:33%;
	color:#777;
	font-weight:bold;
}
#commentform label
{
	font-size:130%;
	font-weight:bold;
	display:block;
	margin-bottom:4px;
}
#commentform #comment
{
	width:75%;
	height:175px;
	display:block;
	margin-bottom:20px;
	font-size:130%;
}
h5#comments
{
	margin-top:35px;
}
div#respond
{
	margin-top:40px;
}
p.cancel-comment-reply
{
	padding:0;
}

OL.commentlist
{
	margin:0 0 20px 0;
	padding:0;
}
OL.commentlist .avatar
{
	border:4px solid #fff;
}
OL.commentlist .left
{
	width:110px;
}
OL.commentlist .right-comments
{
	margin-left:110px;
}
OL.commentlist LI
{
	margin-bottom:20px;
	padding:15px;
	display:block;
}
OL.commentlist LI.even
{
	background:#efefef;
	border:1px solid #e0e0e0;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
OL.commentlist LI.bypostauthor
{
	background:#fff;
}
a.comment-reply-link
{
	font-size:85%;
	text-decoration:none;
	font-weight:bold;
}
OL.commentlist .author, OL.commentlist .author a
{
	padding:10px 0 4px 0;
	font-weight:bold;
	text-decoration:none;
	line-height:110%;
}
.comment-date
{
	line-height:100%;
	color:#888;
}
UL.children
{
	margin:20px 0 10px 0;
}

.bio
{
	margin:40px 0 0 0;
}
.bio h5, .bio p
{
	margin:0;
	padding:0;
}
.bio p
{
	font-size:90%;
	line-height:175%;
}
.bio .pic
{
	width:95px;
	float:left;
}
.bio .details
{
	width:500px;
	float:left;
}

/* Clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

/* Menu dropdown fix applied 2.26.10 */
#header
{
	position:relative;
	z-index:2;
}
.promo-container
{
	position:relative;
	z-index:1;
}
/* */
.pagenavigation
{
	padding:0 10px;
}

/* updated 6.20.10 - wp3 menu now uses children class and so do the comments */
.sf-menu UL.children { margin-top:0; }

It's not windows, its the screen size. The background image is fixed to resize as the browser gets smaller so its always in the top right hand corner..

The column isn't moving, the container for the rest of your content is. More specifically, the margins from this CSS rule.

.container_12, .container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

Try giving the main division a set width.

#main {
    background: url("../images/idea_1.png") no-repeat scroll 10% 0 #FFFFFF !important;
    width: 126.1em;
}

Regards
Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.