The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> repeating image problem, help needed
AsuraDemon
post Mar 27 2007, 05:00 AM
Post #1





Group: Members
Posts: 8
Joined: 27-March 07
Member No.: 2,343



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 27 2007, 06:11 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,884
Joined: 9-August 06
Member No.: 6



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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AsuraDemon
post Mar 27 2007, 02:35 PM
Post #3





Group: Members
Posts: 8
Joined: 27-March 07
Member No.: 2,343



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2007, 03:33 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,463
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AsuraDemon
post Mar 27 2007, 04:05 PM
Post #5





Group: Members
Posts: 8
Joined: 27-March 07
Member No.: 2,343



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;
}

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.


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 {
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2007, 05:38 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,463
Joined: 10-August 06
Member No.: 7



It's all explained here: http://htmlhelp.com/reference/css/style-html.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AsuraDemon
post Mar 27 2007, 05:43 PM
Post #7





Group: Members
Posts: 8
Joined: 27-March 07
Member No.: 2,343



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 27 2007, 07:01 PM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,332
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Why are you using an HTML 3.2 doctype declaration?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AsuraDemon
post Mar 27 2007, 07:04 PM
Post #9





Group: Members
Posts: 8
Joined: 27-March 07
Member No.: 2,343



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.

This post has been edited by AsuraDemon: Mar 27 2007, 07:13 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 28 2007, 12:30 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,884
Joined: 9-August 06
Member No.: 6



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. wink.gif
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! smile.gif
http://htmlhelp.com/tools/validator/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 28 2007, 07:21 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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?)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AsuraDemon
post Mar 29 2007, 01:20 AM
Post #12





Group: Members
Posts: 8
Joined: 27-March 07
Member No.: 2,343



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.

This post has been edited by AsuraDemon: Mar 29 2007, 01:40 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 29 2007, 03:00 AM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,884
Joined: 9-August 06
Member No.: 6



You could find another free host with less annoying ads.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
AsuraDemon
post Mar 29 2007, 06:40 PM
Post #14





Group: Members
Posts: 8
Joined: 27-March 07
Member No.: 2,343



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

This post has been edited by AsuraDemon: Mar 29 2007, 06:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 30 2007, 02:06 AM
Post #15


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Set a height and overflow:auto to the div#content rule.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 7th July 2020 - 06:35 PM