Viewing Recreating iWeb Page Background

Recreating iWeb Page Background



User: Stephen C. 9 years ago
Hi,
I've been using the trial EverWeb version to see how easy it is to recreate an iWeb website. Mostly its been very quick and straightforward.

There's one issue I'm finding difficult:
I'm trying to reproduce iWeb's grey 'Darkroom spotlight' page background in Everweb. It's got great texture. A side question - will EverWeb produce a range of textured images for use as page backgrounds?

I've used two options for using 'Darkroom spotlight' .jpg in EverWeb. Firstly, by adding the 'darkroom spotlight' .jpg to the Everweb 'assets section' and pasting onto a blank page and resizing it. Secondly by adding the image as an image fill Page Background and stretching it.

Both have problems with losing resolution of texture when re-sizing or stretching the original .jpg. For some reason even if I try copying a 'Darkroom spotlight' background from a really long iWeb created web page, the copied background comes out as the standard iWeb page size - very small! Tiling doesn't work as it gives obvious joins - the same if a paste one image below another.

Any advice on how to get round these problems?

Thanks! Steve
User: Roddy 9 years ago
You can insert the image using code injection or a widget…

Code insertion CSS & HTML - http://everwebcodebox.com/layout/background-image.html

java script using jQuery Backstretch - http://everwebcodebox.com/layout/backstretch.html

Background Image Widget - http://everwebcodebox.com/widgetbox/image/background-image.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Stephen C. 9 years ago
Roddy,
Thank you for your reply and apologies for delayed response back to you. I've tried the first and second of your suggestions. Just to re-state, it's what EverWeb is calling the 'page background', not the browser background I'm trying to recreate.

Your first suggestion, i.e. the Code insertion technique gives what looks like a browser background - I get a stretched out 'darkroom spotlight' either side of a blank page. But it's the 'blank page' that I want to have the darkroom spotlight image. And in a way so that it can replicate itself (not stretch) to deal with different page heights and widths (as it seems to do in iWeb).

The Background Image Widget method I can't get to work at all. On preview, I just get the widget appearing next to the 'darkroom spotlight.jpg' I've dragged the Widget onto the page and the instructions ask me to 'select the background image from the assets list' , but what do I do then? - I preview and still get the 50px square Widget on the preview page - maybe I'm missing a step here?

Thanks for your advice on this,

Steve
User: James G. 9 years ago
Roddy, I just tried the background image widget and it places the image as a browser background. I dragged it into the footer. It is a test page and will be up for a couple days
www.mvgoogle.com
User: Roddy 9 years ago
To get the effect of the content scrolling over the spotlight the image would be inserted in the background and made responsive like this…

http://everwebcodebox.com/widget-test/darkroom.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Stephen C. 9 years ago
Roddy thanks for the great sample page with content scrolling over the spotlight image. I may use this scrolling effect as a background image.

Just wanted to know if there's a way to take the darkroom spotlight.jpg and increase its coverage on the webpage, WITHOUT stretching it. (Tiling is no good, due to obvious joins, same if I paste one image below another).

Darkroom has a really nice fine texture. Shame to lose this texture fineness by stretching the image.
User: Roddy 9 years ago
To do it right you would have to take the image and run it through software like PhotoZoom to increase the size without degrading the quality. Then crop a version with a suitable aspect ratio for each page once the content height is know.

The iWeb darkroom template uses several images to create the background - not just the spotlight.

There are lots of texture images available that are suitable for tiling if you search for them. Tiling a small image is obviously preferable to using one large image.

My own opinion - for what it's worth - is that background images have no place on a website since they radically reduce the efficiency of the page in the browser in respect of download time and detract from the content by impairing readability

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 9 years ago
Here's an example of a textured background using a tile rather than an image. The tile is inserted using CSS and the background-repeat selector…

http://everwebcodebox.com/html5/misc/transparent-section.html

Notice how it downloads a lot faster than the one using the spotlight image.

One of the big disadvantages of the iWeb Darkroom theme was the nasty white venetian blind effect it created on page load. This was made worse by photographers using it to display pages with too many images/slideshows.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Stephen C. 9 years ago
Roddy, thanks for your full answer and great examples. I found the background repeat selector in body styles and styling hyperlinks in widget settings especially useful. Thank you, Steve


Post Reply
You must login or signup to post.