How to place graphics with CSS? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

AnaMorph0sIs -> How to place graphics with CSS? (3/30/2009 13:14:07)

So I've been reading a lot over the weekend on CSS, and I've yet to actually encounter a website that tells you how you go about placing a graphic design with it. I have basically cut up the image in Image Ready, all I need to do is place these images so that they stay fixed (top left), and the right image stay fixed to the right, AND that the bottom parts of both those pictures work as background images (in case the site gets stretched).

Here is the design with slices;

[image]http://img156.imageshack.us/img156/9684/cssbg.jpg[/image]

Can't I just specify each image's position somehow? All of the positioning tutorials I've read are about where to position some text here, and some there, and make it blue or red or flashy or whatever.

Any tips? :)



TexasWebDevelopers -> RE: How to place graphics with CSS? (3/30/2009 16:46:25)

There are too many ways to do this and you haven't given enough information for anyone to really help you--perhaps that's why this keeps being unanswered.

First you need to design your layout with CSS. How wide is the site? Is it centered? And so on.

Then you need to decide how you want to position the image(s)...as one large image? As multiple images? Then you have the body background image to set (that's easy).

So here is something I cobbled together in about five minutes. It's valid CSS. There is a main container with three fixed columns (sidebar1, maincontent, sidebar2), centered, width fixed at 780px. There is a background image for the body (all the blindlingly bright squares) and one image set as a background for the container. You have to set the background colors and font colors for each column. No bg color for the side bars and white (or whatever) for the main content column.

View source for the CSS.

http://www.texaswebdevelopers.com/examples/onebigimage.html



AnaMorph0sIs -> RE: How to place graphics with CSS? (3/31/2009 5:14:25)

Hmm, I think I've finally got it, I've been over-complicating stuff in my head I think. Thanks for your reply, very helpful! [:)]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125