/    Sign up×
Community /Pin to ProfileBookmark

background issue

Copy linkTweet thisAlerts:
Jun 30.2006

hi guys, if you take a look here
[url]http://www.blaa.ie/[/url]

you’ll notice that my background image and the layered images aren’t syning up properly. How can i fix this?

I’m simply using
body {
background-color: #000000;
background-image: url(background.gif);
background-repeat: repeat-x;

}
for my background, and i cut up the layout in imageready. Is it just a case of going back into imageready, because what i did originally was to cut a horizontal line from the layout and then use that as the background image.

I’m sure some of you guys have used this technique before for backgrounds so and advise is hugely appriciated. Thanks

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJun 30.2006 — !doctype is the first thing on a webpage. This isn't even a valid one, location also invalid:

<html>

<head>

[B]<!DOCTYPE HTML SYSTEM>[/B]

<title>blaa.ie</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<link href="images/layout.css" rel="stylesheet" type="text/css">

<style type="text/css">
-------------------------------


Do it like this:

[B]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">[/B]

<head>

<title>Title</title>

</head>

<body>

... body of document ...

</body>

</html>

--------------------
or this for HTML 4.0.1:

[B]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">[/B]

<html>

(etc.)

--------
Not sure about the images not sync-ing up. The look the same to me in both browsers (IE & Fx). Do they break as content is added?
Copy linkTweet thisAlerts:
@CharlesJun 30.2006 — You really don't want to be using XHTML unless you really know what you are doing. And for HTML 4.01 it's&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

http://www.w3.org/TR/REC-html40/
Copy linkTweet thisAlerts:
@David_HarrisonJun 30.2006 — There are two problems with your background image lining up, firstly, the main problem is that the body background doesn't line up correctly with the background on #Layer4 (not a very user-friendly ID by the way). You can solve that problem by simply shifting the background accross a few pixels like so:body {
background-color: #000000;
background-image: url(background.gif);
background-repeat: repeat-x;
[color=red] background-position: 4px 0;[/color]
}That will move the background image to the left by 4 pixels and make it line up properly.

However, you have another problem. Your body background image doesn't line up with itself, it seems as though it's 1 pixel too wide, so it results in a somewhat jagged appearence. Shaving off 1 pixel from the right hand side of background.gif should solve the problem, however then you'll need to find out what the NEW background-position should be on the body element.
Copy linkTweet thisAlerts:
@WebJoelJun 30.2006 — You really don't want to be using XHTML unless you really know what you are doing. And for HTML 4.01 it's&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

http://www.w3.org/TR/REC-html40/[/QUOTE]

True on both counts. I merely used 'cut-n-paste' the topics from what HTML-Tidy says about it, but most assuredly, it needs a valid doctype and it needs it before the opening <html>. And I too prefer 'strict' doctype, but would not fuss much over it if someone is using 'transitional' so long as their code actually worked. Insomuch as the doctype used was incorrect and in the wrong place, -even 'loose' is possibly better than incorrect/misplaced, eh? (Well, maybe not)

Thanks for the clarification. ?
×

Success!

Help @Megatron spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...