Been trying to do this for a while and cant get my head around it.
I wish to have a gradient or pattern as a background and have some elements of my page such as the banner created slightly transparent so the background can be seen through it. The challenge is positioning the image central and keeping the background lined up with the image as the browser is resized.
You can see an example of what i mean here:
here is an example of the code I could use:
I would really appreciate some guidance on how create this effect.
Here is the basic html if you
Apologies for not including the css in code tags.
Here is the basic html if you need it.
<html> <body> <div id="container"> <div id="banner"><img src="graphics/gif/banner.gif" alt="nexus counselling perth banner"/> </div><!--end of banner --> </div><!--end of container --> </body> </html>
Still cant figure this out
Still cant figure this out after hours of searching and experimenting. Can anyone help me out or point me in the direction of a tutorial?
I've taken a look at your
I've taken a look at your website and seen the problem which is the banner and the background image.
In circumstances like yours with a fixed width website, for testing purposes I give the container a border and take off the header images and text. Print-screen this and put it into Photoshop. You can now see where your header lines up with the diagonal stripe pattern and can place your red header image over the top while dropping the opacity a bit to get the semi-transparent look you're after. Now all you need to do is resave the header image as it is now and see how it looks online.
This should hopefully solve your problem.