CSS background positioning

[Demurrersurprise]

I want to use CSS to create a webpage where the background is a set image. Is there a way to use CSS to fix where the background image is in relation to various div boxes and buttons?

Basically I want to draw my website background, scan it in, and either set all the CSS elements in relation to my design, OR same as above, but using photoshop cut up all the pieces and affix to div elements and buttons.

Any tips or how-to guides you could suggest?

demurrersurprise.comicgenesis.com

[C.w.]

like... this?

Code: Select all

background-attachment: fixed;

If you're doing a photoshop layout and then cutting it up, you might check out the slicing option in photoshop. I've never used it, but it just cuts up a photoshop image and uses either tables or absolute positioning to lay everything out.

If you do it yourself using position: absolute; you'll get better code, but it's not exactly an efficient way to do it.

[FullmetalKitsune]

If you do it yourself using position: absolute; you'll get better code, but it's not exactly an efficient way to do it.

Mmm, I agree. It does work a lot better, but it's not really that great if you're trying to be "friendly" to people with lower resolutions.

------

(Sorry if this all seems like really basic stuff...)

Straight in the HTML:

Code: Select all

<div style="width: #; height: #; background-image: url(http://);">
Content here
</div>

For use in a stylesheet/header style info.
This would be applied to all undefined divs on your page.

Code: Select all

div {
width: #;
height: #;
background-image: url(http://);
}

Divs with a defined class:

Code: Select all

div.one {
width: #;
height: #;
background-image: url(http://);
}
-----
How to use in HTML:
<div class="one">
Stuff goes here
</div>

As far as sites go:
http://w3schools.com/css/css_background.asp

I think most of w3school's site is pretty helpful.

[Demurrersurprise]

Well, I would like to use CSS to do what I want although most web designers used tables in the past. There has been a push to get away from tables and use CSS. I kinda wanna do that as a sort of challenge. What I am looking to do is some sort of really visually intriguing design like they show off at the CSS Zen Gardens.

One example here.

[C.w.]

Well, unfortunately CSS doesn't work like this:

Code: Select all

body { make: pretty; }

Unless you have specific questions, there's not really a whole lot we can do to help you. If you're looking for some HTML to style, you can use whatever my HTML genrator (link in sig) spits out. I tend to view it as my own crappy css zen garden.

Other than that, follow the links i mention on the first page of the generator, and get designing.