I have a page that holds an iframe:
<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;">
<iframe src="www.google.com" />
</div>
Note that the source of the iframe can be from another domain, so I can't change the html in it.
In addition to this ifame I have a menu and some decoration image at the bottom:
<div id="menu" style="position:absolute; width:100%; top:0px; left:0px; z-index:100;">
...
</div>
<div id="footer" style="position:absolute; width:100%; bottom:0px; left:0px; z-index:0;">
...
</div>
As you can see, I gave z-index to each div, so it should be displayed in that order: the menu on the top, followed by the div with the iframe and at the end the footer image.
What I want is that the iframe (and the div holds it) to have no background (transparent bg color if you like), so the background and the footer image behind it will be visible. Note that I want to change only background color; the text must not change or get opacity.
I managed to get to the bg image and change it (with jquery):
if ($.browser.msie == false) {
$(document.getElementById("content").contentDocument.body).
css('background', "url('transparent.png')");
}
else {
$(document.getElementById("content").Document.body).
css('background', "url('transparent.png')");
}
It works greate on the iframe, but the div that holds it somehow gets a white background.
It won't change if I set the background of the div to this 'transparent.png' image; the div will still save its white background!
If I replace the div with a table, the iframe goes behind the footer image (although it has z-index bigger).
All I want is just to see the footer image behind that iframe...
Please help, I'm quite hopeless... : (
Try:
background: transparent url('transparent.png');
One thing to note, IE6 does not support alpha transparencies for PNGs. You'll want to have an IE specific stylesheet and use an IE only hack for this.
Just to clearify, you arn't trying to get rid of the background color within the iframe itself, but just be able to see the footer and header correct? If this is the case, this should work with an HTML4.01 doctype.
<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;">
<iframe style="background-color: transparent;" src="testframe.html" allowtransparency="true"></iframe>
</div>
I tested this and was not able to duplicate the problem. Here's my primary html:
<div style="background:red;">
<div>
<iframe src="test2.html" />
</div>
</div>
And here's test2.html:
this is a test file
This displays "this is a test file" in an iframe with a red background behind the iframe. Can you post some code to clarify your problem?
did you try transparent background to the div and that semitransparent background image to the iframe?
CSS:
<style>
.hid
{
filter: alpha(opacity=70);
opacity: 0.7;
-moz-opacity: 0.7;
}
</style>
HTML:
<iframe class="hid"></iframe>
This will do the trick.
I tried it on IE6 and it works there.
Related
I have an element (bar) positioned over an iframe, if i set an opacity on that element it stays under the iframe, even if that item has a bigger z-index than the iframe.
However, if i create a container (foo) around that element and the iframe, and set the opacity there, the (bar) element stays in front of the iframe like intended.
CSS:
#bar {
width:100px;
opacity:0.5;
height: 150px;
position:relative;
top:100px;
z-index:2;
background:red
}
#foo {
/* opacity:0.5; */
}
HTML
<div id="foo">
<div id="bar">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe>
</div>
Creating that container would solve my problem, but i cannot do that because my current markup doesn't allow it. I would need the opacity to stay in the bar element.
This only happens in Firefox, and the content of the iframe is a .pdf file.
How can i get the bar element to stay on top of the iframe while maintaining its opacity setting?
fiddle here
UPDATE:
It seems the problem is related to the fact that i'm sourcing a pdf file instead of a webpage in the iframe.
updated fiddle
Thanks in advance
If you use background: rgba(255,255,255,0.5) other element will not be effected by the translucent background.
In the example that I provided the rgb color(255,255,255) is white when you use rgba the last digit is use to set the opacity, .5 would be 50% translucent.
#foo {
background: rgba(255,255,255,0.5);
}
Look at those links. I think that is a discussion of your problem:
StackOverflow and Adobe statement for this problem
I found one more theme to discuss this. As your case they use pdf iframe:
Link here
from what i understand, you want the text to be above the picture, and transparent?
i did something like this on the cover page one of my older sites, chadwaddell.info.
I made a container div, and then put the picture in its own div, and the text in its own div.
set the container position to relative, and the picture position to absolute. also, i would use rgba to do the opacity like this
#bar {
width:100px;
opacity:0.5;
height: 150px;
position:relative;
top:100px;
color: rgba(3,3,3,0.5)
background:rgba(255,0,0,0.5)
}
i went onto your fiddle, and did what i was trying to say, hope this helps http://jsfiddle.net/N9cZp/23/
Hoping for some advice around a CSS issue - I have a layout where I'm absolutely positioning link text above a background image, but cannot get the link to expand to the height of the container (in IEx, works fine in Chrome)
<div>
<img />
<a />
</div>
The containing div has a background colour, and the image has its opacity reduced - on hovering the image, the opacity reduces further, leaking more of the background color. At the same time, the opacity of the link changes from 0 to 100. I'm using a few CSS transitions as well, just to prettify it.
I know that positioning the link absolutely removes it from the flow, so setting height to 100% won't work, but shouldn't I be able to set it explicitly? Doing so works in Chrome but not IE. Problem is related to the image, as the link behaves correctly if it is removed.
Example:http://jsfiddle.net/thSCJ/8/ (includes just enough detail to highlight my problem. In IE, hovering the top left of the image reveals the link. In Chrome, any hover on the image reveals the link).
Any suggestions?
You need to have the <a> tag wrapping the image and the text:
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
<span>Link text</span>
</a>
Here is the CSS:
a {
width:200px;
height:200px;
background:#cccccc;
}
a:hover > span {
display: inline;
}
span {
display: none;
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
color:red;
}
Fiddle: http://jsfiddle.net/thSCJ/12/
Instead of changing the opacity, simple change the font-size property and put the entire thing in the <a> tag.
See this JSFiddle.
I went to my friend's house to see how my webpage displays on other resolutions, but found that the background image didn't reach the sides. So, I went home and did some research and was told that instead of having my background image in the body tag, I should create a div inside of the body tag before the container div and it would work.
This did work for one of my designs but not in the other - the code was exactly the same, but the images weren't.
I tried adding position:absolute in my CSS and it does show, but it has a strange white border along the top and left hand side.
How can I resolve this issue?
HTML:
<html>
<head></head>
<body>
<div class="background">
</div>
<div class="container">
</div>
</body>
</html>
CSS:
body{
text-align:center;
}
.background{
background:url('images/background.png')no-repeat;
width:100%;
height:100%;
background-position:center;
}
Not quite enough information to really give you a good answer... but the white line on the top and left of the page sound like the natural margin appended to the body tag. If you add this to your css it should remove that:
body {
margin: 0px;
}
Also, the background image "reaching the sides" will be primarily dependent on the image's dimensions relative to the viewing screen resolution and browser size. These factors are out of your control so be cautious where you're using an image in the background of your designs.
How do you get a div position fixed where it also doesn't overlay on top of another div?
For example:
<html>
<body>
<div style="background-color:black; height:200px;">
</div>
<div style="background-color:blue; height:400px;">
</div>
</body>
</html>
What I want is for the top div to always be at the top but not to block any part of the bottom div. For an example: http://twitter.github.com/bootstrap/
The black menu at the top always stays at the top while not obscuring the view of any other div. I examined the topbar css on that website and plugged it into my own test document but I can't get the desired effect. What else do I need to do besides "position:fixed;"?
The top bar in your example does start obscuring things once you start scrolling. However, in your case, I think you should just add a padding to the top of your body equal to the height of your black bar. That way, everything is pushed down and it won't cover anything else up.
Here is a simple example of how it could be done
http://jsfiddle.net/fk3wY/3/
So basicly:
body {
padding-top:40px;
}
#top {
position:fixed;
top:0px;
left:0px;
height:40px;
width:100%;
}
I have a image who's width and height i got in Javascript. i want to set the background image on image.
means to the background image is look like image as youtube show the image on video called play icon.
i want to show them on image. can someone tell me how i can set playicon over the image.
I didn't understand exactly your question. I suppose you want to place img over a background-image if yes check the following example:
html
<div>
<img id="play" src="http://dummyimage.com/40x40/454/000&text=Play">
<img id="pause" src="http://dummyimage.com/40x40/848/000&text=Pause">
</div>
css
div {background:url("http://dummyimage.com/300x300/000/fff&text=video") no-repeat;
height:300px;
width:300px;
position:relative;
}
img#play {
position:absolute;
bottom:0;
}
img#pause {
position:absolute;
bottom:0;
left:40px;
}
Demo: http://jsfiddle.net/ACazB/
div has position:relative and imgs inside div have position:absolute. This will allow you to manipulate the position of any images in the scope of div. Using box offsets top, bottom,left,right you can move the images in the place you need.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
http://www.w3.org/TR/CSS2/visuren.html#position-props