CSS background problems

@Adult_SEONov 08.2006

Dear CSS Developpers,

I am having an issue wich is browser independent and might be my mistake or a real issue.

Please have a look at ~~[url]~~http://www.publiceren.net/dieca/kooien.html[/url]

What we want to do is to put the background of the content area exactly in the content area and have it fixed when scrolling the content area (overflow:auto?

The CSS Code:

[CODE] div.content_window { width:507px; height:398px; overflow:auto; overflow-y:scroll; background-image:url(‘images/dieca_04.gif’); background-position:0px 0px; background-attachment:fixed; background-repeat:no-repeat; } [/CODE]

The result:
The background image is fixed but positioned as absolute to the page, so it is aligned top left of the page and visible partly inside the content area. You can test this by resizing the browser window.

I hope someone knows the solution for this!

Best Regards,
Jan Jaap Hakvoort

to post a comment

CSS

10 Comments(s) _↴

@KDLANov 08.2006 — #Have you checked this in Firefox? The image is not tiling, nor stretches the width of the content area.

You might change your background settings to:

<i>
 </i>background:  url(images/dieca_o4.gif) fixed 0 0;

@Adult_SEOauthorNov 08.2006 — #Hi!

Thanks for the fast response!

It doesn't work however: http://www.publiceren.net/dieca/

The bottom div is configured with your code.

Btw, I've discovered that the '0 0' in url(images/dieca_o4.gif) fixed 0 0; doesn't really work, it just seems so as 0px 0px is the default. If you try 10 10 for example it doesn't work while 10px 10px does work.

Best Regards,

Jan Jaap Hakvoort

@KDLANov 08.2006 — #Well, the px necessity could be partly due to the page lacking a DOCTYPE. Add this above your <html> tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

@Adult_SEOauthorNov 08.2006 — #Well, as I've learned before: DOCTYPE SUCKS

It only limits the CSS styling possiblities, even the loose version.

Results from adding the doctype:

The background isn't fixed anymore at all!! So the loose doctype does not alow a fixed background inside a div.

You can see the result on http://www.publiceren.net/dieca/

Best Regards,

Jan Jaap Hakvoort

@Adult_SEOauthorNov 08.2006 — #Hi!

I found a solution on this forum: http://www.webdeveloper.com/forum/showthread.php?t=24001

It doesn't offer support for a fixed background in a scrollable <div> but it does offer most users an solution to be able to use a fixed background in a scrollable div.

Best Regards,

Jan Jaap

@ray326Nov 08.2006 — #Well, as I've learned before: DOCTYPE SUCKS

It only limits the CSS styling possiblities, even the loose version.

Results from adding the doctype:

The background isn't fixed anymore at all!! So the loose doctype does not alow a fixed background inside a div.
[/QUOTE]Browsers don't really pay attention to the specific doctype for rendering, they pay attention to whether the is a valid doctype or not. Doctypes don't suck. Using a valid doctype is the only tactic you have to force a browser out of quirks mode. A page with 185 validation warnings really can't be expected to render correctly on all browsers, though.

http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-attachment

@grumpyoldtechsNov 08.2006 — #Well, as I've learned before: DOCTYPE SUCKS

It only limits the CSS styling possiblities, even the loose version.

Results from adding the doctype:

The background isn't fixed anymore at all!! So the loose doctype does not alow a fixed background inside a div.

You can see the result on http://www.publiceren.net/dieca/

Best Regards,

Jan Jaap Hakvoort[/QUOTE]

PMSL you don't have a clue. a doctype is ESSENTIAL.

without using a doctype you can't be using valid code.

meaning your pages are going to be a complete mess and render different in every browser with no consistency and more than likely completely inaccessible.

i suggest you do some background reading on doctypes it sounds like your in serious need of researching standards

@Adult_SEOauthorDec 11.2006 — #Hi!

Thanks for the reply.

Regarding doctypes. I understand that they offer the possiblitiy to force all browsers into standards so the result will be compatible for all browsers but this also seems to limit the "standard" CSS possiblities! Even the loose doctype does not alow some of the standard CSS features.

Best Regards,

Jan Jaap

@FangDec 11.2006 — #Use this [URL=http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps]fix[/URL] to prevent your layout breaking in Firefox.

Do use a DTD, preferably:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;

@Jeff_MottDec 11.2006 — #[DOCTYPES] also seems to limit the "standard" CSS possiblities![/quote]They don't, really. What you are possibly noticing is that a CSS trick that works in quirks mode no longer behaves the way you expected in standards mode. (Quirky tricks only work in quirky browsers.) This does not mean that you have lost that functionality, however. It means that you need to ask and learn what the standard method is for accomplishing the effect. Generally, the standard method is also the more browser independent method.

Also in #CSS _↴

IE no 100%Horizontal menus(with sublevels) using a list Can someone help me with this design?

Success!

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

Tweet This

CSS background problems

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS background problems

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴