Viewing Change Background Color Fill while Image File is Selected

Change Background Color Fill while Image File is Selected



User: Guest 10 years ago
ADD THIS FEATURE PLEASE!
As a feature request I would like to still be able to change the Browser Background "Color Fill" even while "Image Fill" is selected. I want to be able to choose a Color Fill that matches the color of the Image Fill. This Color Fill will now be behind the Image Fill. The reason for this is that devices with a slower connection take longer to load the background image. For instance my background image is mostly dark-blue so while the page is loading there will be an ugly white background while the page is loading and during that time it also leaves my text unreadable because my text is also white. Even if the background loads fast it will still show a bright flash of white while browsing through the site which is really annoying when you have a dark-blue background. You need to have a matching color fill behind your background image for comfortable browsing.

In order for me to get around this in iWeb I need to edit the rgb code for the background color in the html file of each page using "Search ... Replace"; which is a real pain. I would hate to have to go through the same thing with EasyWeb.
Edit
User: Roddy 10 years ago
In EasyWeb you don't have to add code post publishing since you can inject it into the page HTML using the code boxes at the bottom of the Page inspector.

If you want the background color to be site wide, you can paste the styles into the Head Code box in the Site Publishing Settings page.

-------------------------------
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.
Set As Best Answer
User: Roddy 10 years ago
Here's an example of a background image in EasyWeb using backstretch.js. Note how the background will flash as black rather than white...

http://roddymckay.com/EasyWeb/windmill.html

Drag the browser window out to full width to see the effect of backstretch.

-------------------------------
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.
Set As Best Answer
User: Paul-RAGESW 10 years ago
I haven't tested this but it should work.

Click the Site name in the upper left hand corner and enter this into the Head Code field;



Replacing red with the color you want. You can find the HTML color codes here;

http://html-color-codes.info

Make sure to enter the color with the # sign.

-------------------------------
Paul
EverWeb Developer
Set As Best Answer
User: Guest 10 years ago
The way you have it here http://roddymckay.com/EasyWeb/windmill.html is exactly what I am talking about, but without the .backstretch.

I tried putting



in the header. The only problem is that the color fill then covers up the background image.

Wow, I love the ability to be able to add these codes though! Great feature!
Edit Set As Best Answer
User: Roddy 10 years ago
You would need to do this...

body {
background: #FF0000;
background-image: url('..file path to the background image');
margin: 0px auto;
}

... so that the image loads after the background color

It doesn't work too well because the browser loads white, then red, then the image. That's why I use backstretch!

-------------------------------
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.
Set As Best Answer
User: Roddy 10 years ago
Quote:
Wow, I love the ability to be able to add these codes though! Great feature!


This is what puts EasyWeb way out in front of the competition. We haven't seen too many examples of users taking advantage of it. Perhaps you can show them how?

What I like about it is the fact that I can use drag and drop for the basic stuff like text and images and then use code injection for custom h1, h2 etc (mainly for the search engines) and other custom stuff like navigation, sliders, movies etc.

-------------------------------
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.
Set As Best Answer
User: Guest 10 years ago
[quote="Roddy":ke83uppi]You would need to do this...

body {
background: #FF0000;
background-image: url('..file path to the background image');
margin: 0px auto;
}


For some reason this code doesn't work for me. It just puts the text at the top of the page. Even if it did work it wouldn't be to practical because I wouldn't be able to see the way my site looks until I Publish it. If you could somehow enable a way to do this within EasyWeb that would be best.
Edit Set As Best Answer
User: Guest 10 years ago
[quote="Roddy":1hcuy3zv]Quote:
Wow, I love the ability to be able to add these codes though! Great feature!


This is what puts EasyWeb way out in front of the competition. We haven't seen too many examples of users taking advantage of it. Perhaps you can show them how?

What I like about it is the fact that I can use drag and drop for the basic stuff like text and images and then use code injection for custom h1, h2 etc (mainly for the search engines) and other custom stuff like navigation, sliders, movies etc.

Yes this feature definitely puts EasyWeb way out in front of the competition. I sure will use it for it in many ways! Thank you!
Edit Set As Best Answer
User: Paul-RAGESW 10 years ago
You need the

If you specify the above you shouldn't need any other code.

-------------------------------
Paul
EverWeb Developer
Set As Best Answer
User: Guest 10 years ago
Yes, it is working. Thank you!
Edit Set As Best Answer


Post Reply
You must login or signup to post.