0

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; }
3
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by Arkinder
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..

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.