Does anyone have any idea how to make a background image change size according to the size of the browser window in iWeb?
Here's a couple of examples:
http://www.womenwithoutmenfilm.com/
http://www.designhousestockholm.com/
Thanks.
I also I have the same question . The only thing I found about it, is to set the background image static . You need to change some code after publishing You can see here how to do :
http://allaboutiweb.com/index.php/2010/01/how-to-make-your-iweb-sites-background-static/
I also find this info about the re-sizeable background but i don.t know how to include into iWeb ., you can se here:
http://css-tricks.com/perfect-full-page-background-image/
If someone had an idea of how to do it, if it is posible i in iWeb , would be very nice if you can help
Thanks .
Atman
Hey Guys, I haven't tested it yet, but this should work:
Be sure not to have any background in iWeb, then add this code to the head section of your html:
<!-- Full Background CSS from iWebUnlimited-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
#bg {
position: fixed;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}
</style>
<!-- End of Full Background CSS from iWebUnlimited-->Then add this to the body section of your HTML:
<!-- Full Background div from iWebUnlimited-->
<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://www.womenwithoutmenfilm.com/wp-content/uploads/home_image.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>
<!-- End of Full Background div from iWebUnlimited-->Then of course change the URL here to your image and I think it should work for ya.
hi iWebUnlimited but can you make an tutorial on how to do that it sounds esay but i dont understand the add this to head and this to body
Not sure if this is a requested enough tip to make video tutorial on it, but simply create your site, publish it, then open your html file in an html editor, then copy and paste the code I've pasted above right above the closing </head> tag. Change the image URL in the code to your image, save and your set.
ThankYou it works fine
Thanks a bunch. Great tutorial. Worked great, but the scrolling function of an "oversized" page (,the content, that is) is lost in the process. I'm trying to achieve something similar to the scrollable left column of the above mentioned site:
http://www.womenwithoutmenfilm.com/
The moment I turn my background resizable, the scrolling feature is lost. Any remedies, please?
Thanks again!
Same here. My site will not scroll down anymore. Any help finding a solution would be great!
Thank you.
You must log in to post.
Use the form below to search the site:
Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!
