Member Avatar for msm446

I am trying to help out with a website () - 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
  • 229 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

— the symptom you describe is almost always a placement/anchor problem rather than an OS bug. is right that viewport size matters, and is right to look at the centered grid/container: if the decorative column is attached to an element that shifts when the page is centered, the image will appear to "move" as the window changes size or zoom.

Two pragmatic approaches that give predictable cross‑browser results: pin the decoration to the centered wrapper (so it moves with the content), or pin it to the viewport (so it stays fixed on screen). The wrapper-based approach is best when the column must sit flush with the main column; the viewport approach is better when it should stay at a fixed screen edge. While debugging, remove or temporarily disable conflicting background rules and !important flags so you can see which rule is actually applied, and confirm browser zoom/DPI is 100% when comparing machines.

Example (wrapper-based): create a positioned pseudo-element attached to the centered wrapper so the decorative image is always aligned to the wrapper edge and can be hidden or resized with a media query.

/* wrapper holds the visual column so it stays aligned with the content */
.site-wrap { position: relative; margin: 0 auto; max-width: 1000px; }

.site-wrap::after {
  content: "";
  position: absolute;
  left: 100%;           /* sits just outside the wrapper's right edge */
  top: 0;
  width: 260px;
  height: 100%;
  background: url('../images/decorative-column.png') no-repeat center top;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.site-wrap > * { position: relative; z-index: 1; }

@media (max-width: 720px) { .site-wrap::after { display: none; } }

Quick checklist: inspect the element in dev tools to see computed background rules, test at common breakpoints (mobile/tablet/desktop) and at 100% zoom, and use media queries to hide or reposition the decoration on small screens. This keeps the column stable across browsers and screen sizes.

Recommended Answers

All 2 Replies

Member Avatar for G&G Designing

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..

Member Avatar for Arkinder

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.