16 replies [Last post]
gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Im trying to set up a site. originally just a quick simple design to get it out there but its turning more complicated

I want to use a simple tiled background texture and the main page contents over that (mostly text)

HOWEVER, between them I want to add an image (over the background but showing through beneath the text)
the image i want to be feint, perhaps 50% transparency and positionable relative to the main contents.

So far my tiled background disapears in Firefox and the picture refuses to go behind text and may or maynot appear transparent in some browsers

I have been faffing about with this and my brain has turned to mush. i'm no expert and need things spelt out

PLEASE HELP!

Thanks

Gavin

If i can get one page working right I can ammend images and positioning for the others.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Opacity & layer poblems

Can you show us the code you're using?

Verschwindende wrote:
  • CSS doesn't make pies

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity & layer poblems

Its a bit embarrasing, I think i trashed it more as i went along.

I'll see what I can do...

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity & layer poblems

-----------------------------------------

<DIV style="z-index: 2;">
main text of page
</DIV>

<div style="position:relative; top:-400; left:-150; width:500; height:360; z-index:1; padding:0px;

background-color:#000000; filter:alpha(opacity=50); opacity:.50; background-image:url(site-iguana.jpg);

layer-background-image:url(site-iguana.jpg);"></DIV>

<Table>
taxt at bottom of page
</Table>

------------------------------------------
Its something like the above
but there is also a big space between where the div is and the table on the bottom of the page as if its filled with the feint background image.

the tiled texture for the whole page is on an external CSS page

m23
Offline
newbie
Last seen: 14 years 28 weeks ago
Joined: 2006-04-12
Posts: 7
Points: 0

Opacity &amp; layer poblems

Can you post an image mock up of how you want it to look?

Also, I believe you'll need to add CSS position to make z-index work, for example:

<DIV style="position:relative;z-index:2;">

Whether you use position:relative or position:absolute depends on how you want it to work out. But try that and also post a mock up and I can help you out.

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity &amp; layer poblems

this is what im thinking.

im seeing the basic structure something like this

1.top layer- centered, contains normal html and text etc
2.mid layer- contains a semi transparent image positioned relative to main text of top layer
3.bottom layer/page background, with a repeated tiled image.

hopefully that explains it all.

cheers!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Opacity &amp; layer poblems

Aye, something like:

<div class="transparent">
<div class="text">
text
</div>
</div>

then apply transparency to the .transparent div

Let us know if it works Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

m23
Offline
newbie
Last seen: 14 years 28 weeks ago
Joined: 2006-04-12
Posts: 7
Points: 0

Example

Ok, I think this is what you need. Here's an example, http://dhtmldev.com/examples/css/div_bg_img/

You will want to tweak it, of course. I used some different colors and images and margins, etc. because I did the example with what I could find.

Here is the basic setup.

You need just one div (unless you want to add more inside this one div for the 3 columns). The main div holds the content and displays the iguana as its background image.

And the tile background image is applied to the HTML body tag.

Here is the CSS:

body 
{	background:url(blendembossed_tile13.jpg);
	color:white;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
div#content 
{	background:url(iguana.gif) no-repeat bottom left;
	margin:auto;
	padding:10px 100px;
	width:500px;
}

And here is the HTML:

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean gravida. Aliquam gravida neque a nisl. Etiam varius. Aliquam erat volutpat. Aenean posuere nisl sit amet dolor. Praesent pede. Nunc blandit, felis et gravida convallis, tellus nisl tempor magna, eget feugiat sapien enim eget sapien. Sed convallis magna ut nisi. Curabitur magna dui, dignissim non, rutrum et, varius nec, neque. Ut mollis fermentum leo. Vivamus a augue. Aenean sit amet sapien.
</p>
<p>
In ullamcorper purus eu orci. Donec commodo, arcu quis ultricies suscipit, ipsum justo laoreet mi, vitae molestie sapien arcu vitae quam. Donec tristique. Donec porttitor lobortis dolor. Cras nisi felis, condimentum id, accumsan egestas, sollicitudin at, lorem. Aenean dignissim. Sed eu elit vitae dui mattis tristique. Duis quis augue sit amet leo nonummy venenatis. Cras ante felis, mattis et, accumsan ac, mollis non, pede. Cras eleifend augue feugiat turpis imperdiet imperdiet. Quisque ullamcorper ligula eget odio. In ligula justo, pulvinar eu, blandit at, placerat sed, mauris. Maecenas pretium, mi sed feugiat laoreet, enim dolor dapibus eros, et congue libero nisi eget ante. Maecenas pellentesque, lacus vel pulvinar tempor, tellus quam bibendum velit, at posuere libero pede quis velit. Nullam in metus. Morbi non libero. Vivamus scelerisque tempor purus. Aliquam erat volutpat. Pellentesque semper. Aliquam erat volutpat.
</p>
</div>

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity &amp; layer poblems

Thanks M23 for all the effort, though I was after more flexibility in the degree of transparency/opacity of the image and its positioning as each page will be a different image and position.

though your earlier code did sort out the layer problem I had and it works in FF as well now.

And Pineapplehead, im confused by 'transparent' is that the same thing as'opacity'? sorry im a bit of a novice.

Maybe ill get the bodged page online and you can see better, after you stop laughing.

Gav

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity &amp; layer poblems

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Opacity &amp; layer poblems

Your original image was a bit small and I wasn't sure what it was you were after.

I thought you wanted the iguana as a background, then a slightly opaque background behind the text.

What exactly is it you're after?

Verschwindende wrote:
  • CSS doesn't make pies

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity &amp; layer poblems

The iguana pic i want behind the text but in front of the background. however it needs to be able to be positioned anywhare on the page.

I put the code for the iguana pic after the main body of text and have been trying to set it to behave like its behind the text and the opacity allows the background texture to show through.
the link i gave to the page seems to work close to how i want it to but as you can see thereis big gap between the body of text and the little grey add at the bottom of the page.
that little grey ad should be right bewlow the text not after a load of space.
The gap is something to do with the iguana div but i cant figure out why

and FF doesnt render the background texture i have in my CSS file but it works for other browsers.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Opacity &amp; layer poblems

The large gap at the bottom is your iguana div! in using top:-400px you haven't moved it as such, you have offset it from it's natural position in the flow, it's why the value of the position property is called 'relative' you have placed the image relative to it's true position the space for which is still preserved.

You may be better off trying to place it absolute, but finding the correct z-index will be trickier.

Be prepared you will likely come in for some flak for that code using tables, no Doctype, deprecated tags and attributes, all uppercase tags, is not going to find a lot of favour here.

Some things you ought to do are move all inline styles out to the head or preferably the external stylesheet, ensure that major divs are named so that you can target them, move your style link into the 'head' section it does not belong in 'body' and importantly add a valid Doctype.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity &amp; layer poblems

Hugo wrote:
The large gap at the bottom is your iguana div! in using top:-400px you haven't moved it as such, you have offset it from it's natural position in the flow, it's why the value of the position property is called 'relative' you have placed the image relative to it's true position the space for which is still preserved.

I understand that, is there no way of loosing that extra space?

Hugo wrote:
You may be better off trying to place it absolute, but finding the correct z-index will be trickier.

i tried it but absolute makes it impossible to dictate where the image goes in relation to the text which is all part of the page composition. different resolutions will make it go funny places unless i lign everything up top left which would look odd in large monitors and such.

Hugo wrote:
Be prepared you will likely come in for some flak for that code using tables, no Doctype, deprecated tags and attributes, all uppercase tags, is not going to find a lot of favour here.

I dont understand what doctype to use. how do you know which one? my computers knackered so im using someone elses and doing everything on notepad using what i can remember or find.

Hugo wrote:
Some things you ought to do are move all inline styles out to the head or preferably the external stylesheet, ensure that major divs are named so that you can target them, move your style link into the 'head' section it does not belong in 'body' and importantly add a valid Doctype.

hopefully ill upgrade it all as time goes by but my main objective is to get it all up first then do the fine tuning. I'm well aware its not perfect or even averagely good for that matter.

Cheers

Gav

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Opacity &amp; layer poblems

Some of the points I mentioned are not fine tuning, they are mandatory in terms of compliant standards coding and of CSS functioning according to the specs.

You should place this at the very top of your page , it's transitional to take into account your use of redundant and deprecated code (tags such as <center> <font> should no longer be used )

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 


Errors such as your link tag placement must be fixed this is not a fine tuning thang it's a coding error. it needs to be moved before the closing head tag that is above it.

If you are going to use tags such as <center> then use it's closing tag.

This isn't an error but it ought to be done and that is where you have a div tag grouping elements give it an ID describing it's purpose this way it's easier to target rulesets at it.

Deal with those points and then come back to the image (out of interest see what happens if you give the div a negative bottom margin)

Sadly the use of tables to layout the design does not make things easier to accomplish.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gav
Offline
Regular
UK
Last seen: 14 years 28 weeks ago
UK
Joined: 2006-04-10
Posts: 11
Points: 0

Opacity &amp; layer poblems

OK

I think(hope) this is more appropriate.
http://www.freewebs.com/canvascreatures/commission2.html
I couldnt ge the iguana image to use zindex without another on the page, and couldnt assign it to the main contents as absolute or relative would prevent the lot from staying centered on the page.
So made the bottom div use a zindex relative to the contents then made the iguana div relatively positioined to that with negative numbers to sit behind the text.
--------
<div id="footer" style="position:relative; z-index:1>
content of div at bottom of main page content
</div>

</DIV>
<DIV style="position:relative; z-index:0; top:-400px; left:-100px; width:500px; height:360px; padding:0px; background-color:#000000; filter:alpha(opacity=40) chroma(color=#FFFFFF); opacity:.40; background-image:url(site-iguana.jpg); layer-background-image:url(site-iguana.jpg);">
</div>
--------

all good I thought but in FF (and possibly others) the Iguana pic is off the left of the screen and even sits on the left even with no exact positioning specified while in other browsers it is centered beneath the main body as I hoped..

I'm sure im close but cant see the wood for the trees

thanks for even more help

gav

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Opacity &amp; layer poblems

Your simplest and safest approach to this is to loose the opacity property, edit the image to have the opacity you require then you can set the image as a background of #wrap positioned to the bottom left of the element, failing that take the existing div and rules and set it as the first child of the #wrap element, ensure #wrap is position relative and change the image div to position absolute then you can use top/left positioning to place the image within the #wrap.

I would be cautious with using opacity as it is inherited through descendent elements and therefore can have undesired effects unless it is within it's own unique stacking context.

As I have mentioned before please remove the inline styling it doesn't make matters any easier when trying to help and should not be used anyway unless there is a specific reason.

You must also clear up the sloppy syntax errors that still exist in your markup, go through carefully and check for all missing quote marks also add a meta character set and validate often to catch little errors , if not already using it download the HTML-Tidy extension for Firefox as this will warn of errors.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me