...*Need it lighter but don't know for sure because I don't know how it will look actually on my website..
No worries.....here's a compromise then...
I've attached a PSD file with your 2x2px image expanded to 100x100px. It makes it easier to work with.
I've also changed the colour to something lighter....try it first to see if you need it darker or lighter still.
Open the PSD file in Photoshop and note the Layers Panel...
If you DOUBLE click the words 'Color Overlay' you will open the 'Layer Style' window with 'Color Overlay' selected in the left hand panel...
On the right are all the options for 'Color Overlay'.
Click the small colour swatch rectangle to open the colour picker...
When you have a colour you want to try use FILE > SAVE FOR WEB...
1. Set to '2-Up' so you can see your changes to the Save For Web options.
2. Select 'PNG-24' from the dropdown.
3. Make sure 'Transparency' is checked.
4. Make sure 'Convert To sRGB' is checked.
5. Enter '2' into EITHER the width OR height.....if the 'Constrain Proportions' doesn't look like my image click it so it does. I've deliberately made the image 100x100px so that you can also just enter 2% if you prefer.
6. Click 'Save'.
Save the image with the same filename as it had when downloaded from your server.....
This is important!
Upload the PNG image back onto your server....overwriting the original.
You have the original here on PSG now so if you need a backup there is one here....in case you lose your own.
Clear the cache on your browser.
Reload the page.
Check if the new colour is suitable.
If not, repeat the above with a different colour.
Rinse, spin, repeat if needed.
View attachment header-background.psd
Regards.
MrTom.
