best ways to go about a website with image based containers?

[morrysillusion]

ok, listen, i dont know the word that is used to describe a website like this but i am sure you will know what i mean when i give the examples. its been a hot minute since i focused on webdesign since the last months got kinda crazy... but i have ideas of layouts for my site that i have just always been a lil unsure how the tackle.

when is say website with "image based containers" i means like ones where the entire layout of boxes and whatnot arent defined by the existing css but rather an entire image/multiple images that make the layout!

examples,
https://uncannyvalley.neocities.org/
https://cinni.net/

uncannyvalley especially is done in a way i have seen most other sites done-- where it seems the layout image has been split into pieces. my main question is for one, is that the way to go about it? no ones giant image but multiple split up images? as i can see, it seems the basic idea is to set up your div containers to match the pixel size of your full layout, and then set those images to fill the entire area.

are there easier ways to go about this? im mostly dreading trying to figure out the pixel size of the entire image and how to split it up to fit in div boxes, honestly. admittedly tho my use of divs has always been kind of a mess as i feel like i may need to reteach myself some stuff to make sure i better understand how to tackle this idea specifically.

[Melooon]

Firstly I wanna say, please don't use uncannyvally as a how-to-do-this study, its a great looking site, but their code is a disaster! :omg:k: (Their structure is ok-ish, its just very messy, they use WAY too many unnecessary positioning commands and hosting images on discord is not ok!!) :TnT:

Ok so, I interned for a while at a London web advertising agency around 2009, it was still the era when they made sites in this style professionally. The way they did it back then was to design the entire site using Adobe Illustrator, then they would slice it up into fixed standard segments, and export things like buttons as separate images. (Most good graphics editors will have this slice functionality)

The background images would be reassembled around a div (which is a predefined size and was cut out from the original illustrator design) and content would be loaded into the div using php from a database - on neocities we don't use php, so most sites use iFrames to get the same effect.

After that buttons can be positioned on top of the background images using a few simple CSS absolute placements - and because the background was sliced up in known sizes and locked into a div of a fixed size, it should all just snap together!

Something like:

Code

outer div - 1000px wide
 header background (1000px wide)
 side background (200px wide) - centre iframe/content div (600px wide) - side background (200px wide)
 footer background (1000px wide)
code for buttons (positioned where you like using position absolute)

It can get much more complex depending on how complex your design is and how many windows you want.

As for cinni's site, she uses a much simpler system; she has one background image and then iframes and buttons are positioned on top of it. This design is great for pixel art because the background image can be low-res and resized while still looking good, but its not really usable for a high-res background because it would be super slow to load in a huge background image!

Ooph I hope that was clear and I actually answered your question - there are a few ways you can make it work, and some will be better or worse depending on what your trying to accomplish! Also I know my knowledge of this kinda site creation is over 10 years old, so maybe there are newer options, but this is the best way I can think to do it!

[morrysillusion]

thanks for the reply! yeah, i noticed that user's code for sure as well- i guess i mostly mean from a visual standpoint purely and Not the coding one lol. the discord images especially were an oof to see. there were a few other sites ive seen that i just cant recall that i know also split up their image based layout in a similar way however which is mostly what i wanted to get at. (remembered one was sugarforbrains- which is different in many ways but, that same hand drawn vibe i guess)

that definitely makes sense-- ill have to look into some way to "slice" up an image though i am sure it wont be too hard. when i saw cinni's site i kept getting the Entire image of the layout too when looking at it closer and so i assumed thats what was happening- one solid image with stuff positioned on top. ill have to think about that- what might work better for the design i have in mind!

i will definitely have to test some things out!! probably gonna whip together some super bare images just so i can mess around before dedicating my time to something super clean that doesnt work...