Seamless background image overlapping on both sides for some odd reason ~ HELP!

HTML & CSS
1

I’ve attached a screenshot here of the website in question but as you can see it is not displaying uniform on either side. Instead it looks as if their is an overlap issue going on even though the image itself is said to be “seamless”.

The image itself only measures 299 width x 401 length and of course we want it to tile across the screen.

We were using another image (nearly the same size) that was also seamless and just wanted to swith it out. The current background image measures measured 347 width x 246 length but I suppose that is irrelevant at this point.

I’ve also attached some of the CSS below (not sure what all you would need) to show what we currently use but again not sure why this one is not working? It is clearly seamless so not sure what is going on.

The screenshot is based on the CSS attached.

Really hoping this helps so we can make this background live before end of day!

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing: 0;
}
 
 form table tr td{
	 padding-top:4px;
	 padding-bottom:4px;
 }
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/* Basic */

[COLOR="Blue"]body{
	background:url(../images/new-gold-back.jpg);  
        
}[/COLOR]p{ margin:9px 0;}

.clear{ clear:both;}

.small{ font:10px/12px Arial, Helvetica, sans-serif}

h1{ font:italic bold 20px/26px Georgia, "Times New Roman", Times, serif;
    margin-top:10px;
	margin-bottom:18px;
	color: #13415f;
	*font-weight:600;
}

h1#adsHead{ text-align:center; }


h1.innerTitle{
	font:italic bold 24px/26px Georgia, "Times New Roman", Times, serif;
    margin-top:10px;
	margin-bottom:18px;
	color: #FFF; 
	*font-weight:600;
	display:block;
	background-color:#8E9DBC;
	padding-left:8px;
	padding-top:2px;
	padding-bottom:2px;
	
}
h3{ font:italic 20px/18px Georgia, "Times New Roman", Times, serif;
	margin:18px 0;
	color:#5A6178;}

h4{ font:normal 18px/18px Georgia, "Times New Roman", Times, serif;
	margin:9px 0;
	color:#5A6178;
	}

Thanks for your help!

2

Well when you say tiling image do you mean seamless because wouldn’t they work the same?

Here is the image and we are using the smallest size:

http://us.fotolia.com/id/4741969

Hope that helps. :slight_smile:

3

The problem is caused by the image you are using. It tiles correctly down the page, but not across the page. Have a look at the image I have attached which shows the mismatch.

4

Does this mean it’s not going to be usable then or is there a particular way in which I would have to tell it to display in CSS?

Could I crop it in a certain way that would enable it to work? Wishful thinking…I know.

It too forever to find this image and it just blends so beautifully…then only to find out it may not work.

So basically am I up the creek without a paddle on this one or is there still hope? :frowning:

5

I can see where the tiled images start and stop horizontally because the left and right vertical sides of the image to not “blend” with each other resulting in a “vertical thin line” where the tiled images join horizontally.

6

Hi DiversifiedWoman, and welcome to SitePoint! :slight_smile:

Are you sure the image is a tiling image? It’s hard to tell from the screenshot. Perhaps you just need to clear your cache to reset the CSS in your browser. Does the same thing happen in another browser?

7

This is a good source of images for seamless tiling you might consider looking at.

8

I see what you mean…

Well with a bit of trial and error I’m happy to say I’ve fixed it.

I was able to make the image work by turning the image sideways, then increasing the canvas width to double. Once I did that I just pasted another instance of the image in the blank canvas area, lined it up and then just saved it as a new image.

Then I resized the image and somehow it now works! I guess that’s all that counts.

Smiling now and all before the New Year rings in!! :slight_smile:

9

Yes, “seamless” seems (ha ha) to be the right word. Your image is not seamless, as others have said, so it’s not much use here. There are lots of seamless pattern images available online. Here is a nice site that lets you buy them for a few dollars: