Calling all web designers and CSS coders

francis bold's picture

I believe the term is called (background liquid image) the principles are that a image/photo is place as a background image in dreamweaver, but when viewed in any browser regardless of scaling up or down stays relative to its surroundings at all times.

Please see example
http://www.growmedia.ca/

I'm told it can be done in CSS script but cant find it anywhere! Would someone be able to help on this?
This has been bugging me for a while!

Cheers
---
Joe

bemerx25's picture

Did you look at their code in the CSS? Source code reveals all!

#supersize img{height:100%;position:absolute;width:100%;z-index:0;}

aluminum's picture

The key style is position:fixed for the #supersize container.

You can also fix background images via background-attachment:

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attach...

francis bold's picture

Thanks guys, I checked out this Supersize thing and looks like its the one. Just the "small" challenge of implementing this code into the html doc to get it all working. Its mind boggling!

I don't suppose anyone else has got this working have they?

http://www.buildinternet.com/project/supersized/

Cheers

all about seb's picture

Francis, which part are struggling with? Do you maybe have a link to the document you are working on?

wormwood's picture

I'm certainly no web expert but I think it may be possible to do it with HTML as seen at...

http://www.infinityfoods.co.uk/

I saved the source code but have not yet tried to implement it myself.

(all '<' and '>' have been removed from the following code)

/head
body onload="check_bg();" onresize="check_bg();"
div id="wrap"
img id="bg" src="/images/winter01.jpg" style="width:100%;" alt=""/

nina's picture

> body onload="check_bg();"

That ain't just HTML, that's calling a JavaScript function. If you check the .js file that is referenced from that page, you'll see it's a sizeable bit of code.

BTW, it looks pretty suboptimal on my 27". If you do do something like this, make sure your images are large enough… but also small enough (in terms of file size) to not annoy people on slow connections, or mobile devices.

Frode Bo Helland's picture

I have another way of doing this. Made a script a couple of years back. (www.bergenskirken.no/visuelt) The bugs it had then are fixed. I can give you a demo if you are interested.

Frode Bo Helland's picture

You need to use a small script to fix the IE rendering. The image gets pixelated.

francis bold's picture

Again Thanks for the input guys appreciate it.

I'm only working locally at the moment on this so cant really post a link. I'm having trouble at the moment in getting my basic template together exactly how i would like, and where my knowledge is limited in DW becomes quite frustrating!

@wormwood Many of the debates in the forums regarding this are on the subject of wether the best solution for this is HTML, Java or CSS and what works best.

I kinda got this supersize thing working. In firefox you can download a hole site with the files and thats what i did with a site that had it. i deleted all there content and just left the supersize script in place. thats about as far as i got baring in mind i been working on it couple hours at a time.

@frode its funny the link you posted is very much the layout i am trying to achieve! but where your menu scrolls with the content i was trying to make mine static menu when content is scrolled. a demo would be great!?.

here's a rough PS mock up of where i'm trying to get
by the way the sites for me as well as free lance work i by and sell cars too.

Frode Bo Helland's picture

I can set that up for you. Drop me a mail: frodefrodefrode [at] gmail.com

Syndicate content Syndicate content