Web design question- Image Layers?

Started by rtf, Mon 28/06/2004 18:42:19

Previous topic - Next topic

rtf

Hey.
I am rather new to web page design.  I only know HTML, some CSS and some JavaScript.
I know that a lot of you are web page designers, so I thought I should post this here.

Is there a way to make "Image Layers"?  Like having one image over another. 
I want this because, for a navagation bar, I want to have an image in the background, and some smaller image-link thingies on top.

Basically what I want is a tag or property that puts an image in the backround, like embedded in the page, but does not repeat.

Thanks  :)
I fail at art.

Darth Mandarb

I'm not 100% sure what you mean ... perhaps you could link to something similar?

Using DHTML there are LAYERS you can use to achieve something like this.Ã,  (the <DIV> and <LAYER> tags)

Quote from: releasethefrogs on Mon 28/06/2004 18:42:19Basically what I want is a tag or property that puts an image in the backround, like embedded in the page, but does not repeat.
Look into the CSS property for this:
<style type="text/css">
<!--
.bgnorepeat {
   background-image: url(bgpicture);
   background-repeat: no-repeat;
   background-position: left top;
}
-->
</style>
Hope that helps!

rtf

Yeah.Ã,  It helped.Ã,  ThanksÃ,  :)

I have a few more questions, though.

The image that I want to use for the backround is this:


As a navigation bar, and I want it to fit the browser's screen.Ã,  How can I set the width and height using CSS?

Thanks againÃ,  :)
I fail at art.

LordHart

#3
You can't change the height and width of the background image with CSS, same as you can't do it with HTML... you can change images imbedded, but not backgrounds.

To do an images height and width though, you could either do it in the image itself using:
<img src="filename" height="height" width="width" />
Or with CSS (in the HTML part):
<img src="filename" class="imgidname" />
(and in the CSS part):
<style type="text/css">
<!--
.imgidname {
    height: whatever;
    width: whatever;
}
-->
</style>
Also, here is a link to an article on Alistapart.com which contains a way to do an imagemap kinda thing with rollovers and also using only one image, cutting it up like they used to do with old videogames. I found it works quite nice, and have used it a few times now.

http://www.alistapart.com/articles/sprites/

I also suggest going through the site (http://www.alistapart.com) and taking a look at some of the things they can do, or also HTMLDog (http://www.htmldog.com) to learn some things. However, with HTMLDog, you need to use a browser apart from IE as the guy doesn't like it and he has stopped IE from accessing his website. ;)

SMF spam blocked by CleanTalk