Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ repeating image problem

Posted by: AsuraDemon Mar 27 2007, 05:00 AM

so, I want to make a website that has a black background, and a repeating image to the left that only repeats vertically, and another repeating image at the top that only repeats horizontally. The problem is the only way I know how to make an image repeat is to make it a background, and I can't figure out how to do this and not have it cancel out my background color (leaving a portion of the screen white), and also I can't figure out how to have two different repeating images. It's driving me crazy.

Posted by: pandy Mar 27 2007, 06:11 AM

You can have several background images by using them with different HTML elements. CSS lets do that. It can also make a background image repeat only along the x or y axis.

http://www.w3.org/TR/CSS2/colors.html#q2
If you need an introduction to CSS...
http://htmlhelp.com/reference/css/

Posted by: AsuraDemon Mar 27 2007, 02:35 PM

I know just a tiny bit of CSS, just enough to fake frames, and I've all ready figured out how to have an image just repeat accross the x or y axis, but not how to have more than one background image, along witha background color.

Anyways I've tried faking frames but I couldn't figure out how to have a different background in each fake frame either, for some reason only one background ends up working, so I'm doing something wrong (I'm a newbie at this so I guess it figures). Anyways I could be overlooking something (I am still kinda waking up right now), but I don't see anything on those links as to how to have more than one background with CSS.

Posted by: Christian J Mar 27 2007, 03:33 PM

You simply apply a separate background property for each element you want affected:

CODE

h1 {
color: #000;
background: #fff url(bar.jpg) repeat-x;
}

ul {
color: #f00;
background: #eee url(foo.jpg) repeat-y;
}

The background-color values will fill out the background of the elements not covered by the images.

Also specifying a foreground color property is a good habit to avoid conflicts between styles in different elements.

Posted by: AsuraDemon Mar 27 2007, 04:05 PM

QUOTE(Christian J @ Mar 27 2007, 03:33 PM)

You simply apply a separate background property for each element you want affected:

CODE

h1 {
color: #000;
background: #fff url(bar.jpg) repeat-x;
}

ul {
color: #f00;
background: #eee url(foo.jpg) repeat-y;
}

Thanks, but I'm trying to figure out where I put that code. I'm completely new to this. Do I put it somewhere around this part of the code?

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

html, body {margin: 0; padding: 0; font-size: 100%; }

body {
}

Posted by: Christian J Mar 27 2007, 05:38 PM

It's all explained here: http://htmlhelp.com/reference/css/style-html.html

Posted by: AsuraDemon Mar 27 2007, 05:43 PM

thanks, I'll mess around with that. Here's a link to the page I'm trying to make. No content in it yet really, just labels for what I want to go where.

http://ashenidol.freeservers.com/testpage.html

Posted by: Darin McGrew Mar 27 2007, 07:01 PM

Why are you using an HTML 3.2 doctype declaration?

Posted by: AsuraDemon Mar 27 2007, 07:04 PM

Because I'm learning how to do this from guides that are on the internet, and that's what the one that I found said to do. I wanted to follow exactly what was on the site. Anyways I took it out, and it hasn't made a difference that I can tell.

Posted by: pandy Mar 28 2007, 12:30 AM

No, but using a more up-to-date doctype might (see below).

I suggest
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd

If you want to use deprecated attributes and elements (FONT, align...) you'd have to use Transitional.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

http://htmlhelp.com/tools/validator/doctype.html

I hate to clobber you with this when you are learning, but it's important for how CSS pages render. Browsers have two rendering modes since several years. Standards Mode (AKA Strict Mode) and Quirks Mode. In Standards mode they try to render the page according to the spec, in Quirks they emulate the pesky bugs of older versions of themselves. They use the doctype as a trigger for these modes. Note that Standards (Strict) Mode has nothing to do with HTML Strict. IMHO it's just unlucky that the doctype is used for this. You can read all about this at the below site. You don't have to do it now, it can be confusing, but bookmark the page for later. If you stick to one of the two doctypes above you will get Standards Mode and that's what's important. No doctype or an old one will get you Quirks Mode, not a good learning environment.
http://hsivonen.iki.fi/doctype/

Also, you need a doctype or you can't validate your stuff. In my opinion there's no better learning tools than validators - really!
http://htmlhelp.com/tools/validator/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Posted by: Frederiek Mar 28 2007, 07:21 AM

And for such a layout, go see at http://blog.html.it/layoutgala/.

(And please, get rid of those annoying javascript ads. Put there by the server?)

Posted by: AsuraDemon Mar 29 2007, 01:20 AM

QUOTE(Frederiek @ Mar 28 2007, 07:21 AM)

And for such a layout, go see at http://blog.html.it/layoutgala/.

(And please, get rid of those annoying javascript ads. Put there by the server?)

They are put there by the server, unfortunately. Yes they are annoying. I don't really want to pay to get rid of them just yet though, or maybe I will, I was kinda thinking I should get a little bit further along with the site before I pay for it though. Anyways thanks for the help, I think I'm sort of starting to get somewhere with this.

Posted by: pandy Mar 29 2007, 03:00 AM

You could find another free host with less annoying ads.

Posted by: AsuraDemon Mar 29 2007, 06:40 PM

so I've been messing around with the layouts from layoutgala. However I want the content section to scroll, and the rest to stay fixed in place. I've tried messing around with overflow a bit, but can't really figure out what I'm doing, and make it look decent. Anyone know how to correctly add a scroll bar just to the content section of this layout: http://blog.html.it/layoutgala/LayoutGala07.html

Posted by: Frederiek Mar 30 2007, 02:06 AM

Set a height and overflow:auto to the div#content rule.