3 replies [Last post]
jpolsonb
jpolsonb's picture
Offline
newbie
perth
Last seen: 11 years 21 weeks ago
perth
Timezone: GMT+8
Joined: 2011-05-10
Posts: 3
Points: 4

Hi,

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:

http://1100.com.au/default.aspx

here is an example of the code I could use:

CSS

body {
background-image:url(../graphics/jpg/container_background.jpg);
background-repeat: repeat-y;
text-align:center;
margin:0;
padding:0;
font-size:70%;
border:none;
width:100%;
}

#container {
width:1000px;
margin:auto;
padding-top:15px;
height:100%;
/*background-color:grey;*/
border:none;
}

#banner{
padding:0px;
margin:0px;
border:none;
/*background-color:blue;*/
height:113px;
width:645px;
}

HTML

I would really appreciate some guidance on how create this effect.

Regards, Jamie

jpolsonb
jpolsonb's picture
Offline
newbie
perth
Last seen: 11 years 21 weeks ago
perth
Timezone: GMT+8
Joined: 2011-05-10
Posts: 3
Points: 4

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>

jpolsonb
jpolsonb's picture
Offline
newbie
perth
Last seen: 11 years 21 weeks ago
perth
Timezone: GMT+8
Joined: 2011-05-10
Posts: 3
Points: 4

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?

Thankyou.

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 11 years 21 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

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.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.