Viewing Wide Banner
Wide Banner
|
User: Paul W. 11 years ago
|
|
|
Hi, does anyone have a tip on how to put a wide banner (possibly an image) which will go completely across the screen at the top of each page. I will still leave the body definition at somewhere around 1000 pixels wide so that it always stays nicely centred. TIA -Paul- |
|
|
User: Roddy 11 years ago
|
|
|
You can put an image in the background but remember that it will be responsive so the height will increase along with browser width. Paste this into the page or site wide Head Code box... <style type="text/css"> body{ background: url("{!-ASSETSPATH-!}Images/01w.jpg") no-repeat; background-size:100%; } </style> Replace this - {!-ASSETSPATH-!}Images/01w.jpg - with the relative path to your own image. Get this by control clicking the image in the Assets list and selecting "Copy Relative File Path". ------------------------------- 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: Paul W. 11 years ago
|
|
|
Thanks for the tip. The code I put in the header was: <img src="{!-ASSETSPATH-!}Images/DarkBrownLeather.jpg" width="100%" height=200px> As you will see the height parameter stops it growing. This of course does not work with photos which get stretched but with a background pattern like my leather stuff it works just fine. Thanks -Paul- |
|
|
User: Roddy 11 years ago
|
|
|
If you want a full width header and footer with a color - or color gradient - background you can do it like this... http://everwebcodebox.com/widget-test/responsive-header.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: Paul W. 11 years ago
|
|
|
Yes I tried your code and it works fine. I needed to put in a top margin to prevent my page covering the gradient across the top. I suppose using a div like this you could also put up an image. -Paul- |
|
|
User: Roddy 11 years ago
|
|
|
In the demo I have the browser background color set white and the page content background set to none so that it doesn't cover the full width header.
------------------------------- 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: Raf P. 11 years ago
|
|
|
This is very nice! EW must build in this feature. If this possibility can be done in a masterpage and there is a preview available right in EW. This would be a enormous progress of designing sites in EW. ------------------------------- Kind regards, Raphael Pairoux |
|
|
User: Roddy 11 years ago
|
|
|
There's a widget for creating a wide header mentioned in THIS topic.
------------------------------- 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: Paul-RAGESW 11 years ago
|
|
|
This can be done in version 1.8
------------------------------- Paul EverWeb Developer |
|
|
User: jefflopezdesigns 11 years ago
|
|
|
Quote: Paul-RAGESW - 11/03/2015 19:56:06 This can be done in version 1.8 Am I missing a setting or does the "full width" feature not scale the image proportionally when the size of browser changes? It seems to stretch and scale to fit or fill, but in some cases it's not quite right. |
|
|
User: Roddy 11 years ago
|
|
|
You cannot scale an image proportionally in an element which has a fixed height. An image which stretches the full width of the browser with a fixed height would need to be as wide as the widest browser window. This would need to be at least 2000px wide and more than twice that size for an iMac 27 Retina. Obviously, forcing the browser to load an image of that size is not a brilliant idea in terms of page download speed - especially when the visitor is using a tablet and a mobile wireless network. To do this sensibly, you would need to insert the image as the background to a div and use media queries to load the appropriate image for the device. This would require at least four image files - or eight if you include @2x versions. A 100% wide header background image really is a waste of space when most visitors will only see a small portion of it. Most 100% wide headers use a CSS color or gradient which have no file size. You can create the same effect using an image which is the height of the header and, say, 10px wide repeated on the x-axis. Now that most visitors are using CSS3 capable browsers, this is no longer necessary. ------------------------------- 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. |
|
| Post Reply |
| You must login or signup to post. |