Power By 专否社区

How to show a two color area?

Go To StackoverFlow.com

4

Since now, in the design of one of the websites I work, I've been using a graphic to decorate the header section that consists in a diagonal division white in the lower side and transparent in the upper side. The result is this:

enter image description here

If I change upper color, as the image is transparent in its upper area the effect seems perfect:

enter image description here

Now, I need to allow users to change page background and that's the problem:

enter image description here

Background changes to red, but the image I used to decorate the header doesn't change.

Is there any way to allow users to change the background without ruin the header decoration?

Note that store a copies of the decoration imagen in different colors is not an option due I allow users to choose any 24-bit color. Also, to change the image in real time like explained here isn't an option due multiple users may access the same file.

2012-04-04 16:43
by Ivan
Use a png with transparency - Yoshi 2012-04-04 16:45
The image I'm using is a PNG with transparency (the upper area is transparent - Ivan 2012-04-04 16:47
Then check for a background color for the image-element (or any parent element). And maybe add a link to the page, so we can have a look - Yoshi 2012-04-04 16:50
The page is an intranet site, so it's not possible to add a link, sorry - Ivan 2012-04-04 17:02
Point your browser to jsfiddle.net and make an exampl - Kyle 2012-04-04 17:06
if i understand corectly the white part is opaque and the colour (orange/green) is transparent. you allow the user to change to page colour. do you allow them to change the header (orange/green) parts colour - Stuart 2012-04-04 17:20
Yes @Stuart, the white part is opaque and the upper part is transparent, so if the user want to change the orange part is as easy as add another background color to the header, but if he wants to change the white part, the white opaque causes the undesired effect showed in the third graphi - Ivan 2012-04-04 17:23

2

You could try changing the image in realtime using data URIs: https://developer.mozilla.org/en/data_URIs

With a data URI, you can do something like the following: <img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />. The image can be changed dynamically in JS by generating a new image and setting the src attribute to the new data URI.

You will need to find a suitable format for generating images in JS though. I have used pnglib.js before, and it works, but it might be slower than you'd prefer. You might need to test some different libraries and image formats to see which can be generated quickly. Also, make the image as small as possible - should be only the area with the diagonal split, the area to the right can be done with a div instead.

Alternatively, you could generate a unique image server-side via a script. Make a script that takes a GET parameter for the background color and generates the appropriate image (for PHP, you can use GD or IMagick). Advantage is that the server may generate the image and send it to the client quicker than the client could generate it in JS.

2012-04-04 17:18
by Ryan P

0

Add the following to the div with the background image:

position: absolute;
top: 0px;
right: 0px;

The problem currently is that the background cannot overlap your div with the background image. Adding the position: absolute gives your div some kind of "ghost box" model, thus allowing the background of the body to overlap it.

P.S.: you can also play with z-index if you want to.

2012-04-04 17:10
by Florian Margaine
Ads