yes you can (if i understand your question correctly)


heres the code
if you have edit access to the iframe content put this in the head (of the iframe)

    &lt;style type=&quot;text/css&quot;&gt;
     &lt;!-- BODY {background:none transparent;}--&gt;
     &lt;/style&gt;
and then embed the iframe like this

    &lt;iframe src=&quot;frame.htm&quot; allowtransparency=&quot;true&quot;&gt;

  [1]: http://dobusinessincanada.ca/list-of-businesses/

By inspecting the iframe page you might find out there is color on some parts of the page. My suggestion would be to start from the highest component when adding the transparency: 

```css
html {
  background-color: transparent !important;
}
```

And then in the iframe element:

```html
&lt;iframe src=&quot;www..&quot; allowtransparency=&quot;true&quot;&gt;
```

This isn&#39;t tested, but iframes (any element) should have a default background of being transparent.

If that&#39;s not true, you can set them to being transparent in CSS `background: transparent`

If that doesn&#39;t work, you can use CSS opacity filters:  
http://www.w3schools.com/Css/css_image_transparency.asp

So I know how to name a textbox, or a like object in PowerPoint with VB, but I was wondering if there was a way to name objects through the Ribbon (PowerPoint 2007). For instance, if I add a text box onto a slide, is there a way to assign it a name (sort of like the properties window in access, or the textbox in Excel 2003 at the top left side where you can enter the name)?

Basically so I can reference it in code later; without having to use code to name each and every object i add after the fact. Perhaps an easier way through the Ribbon?

How to name an object within a PowerPoint slide?

I want to create a `DataGrid` control in WPF in which there is a button in the first cell of each row. Clicking this button will show `RowDetailsTemplate` or the SubRow. 

How do I add a button which will show/Hide the `RowDetailsTemplate`?


Adding a Button to a WPF DataGrid

I need to have a (crossdomain) iframe with dynamic width and height.

My question is,
Can I create an iframe with 100% size and a transparent background that will show the parent of this iframe, behind it ?

Can I attach a css property or a transparent gif for the iframe background to make that effect ?

Thanks.

Transparent Iframe Body

I need to have a (crossdomain) iframe with dynamic width and height.
My question is,
Can I create an iframe with 100% size and a transparent background that will show the parent of this iframe, behind it ?
Can I attach a css property or a transparent gif for the iframe background to make that effect ?
Thanks.

I&#39;d like to overlay a div (or any element that&#39;ll work) over a table row (tr tag) that happens to have more than one column.

I have tried a few methods, which don&#39;t seem to work.  I&#39;ve posted my current code below.

I do get an overlay, but not directly over just the row.  I tried setting the overlay top to $divBottom.css(&#39;top&#39;), but that is always &#39;auto&#39;.

So, am I on the right track, or is there a better way of doing it? Utilizing jQuery is fine as you can see.

If I am on the right track, how do I get the div placed correctly?  Is the offsetTop an offset in the containing element, the table, and I need to do some math?  Any other gotchas I&#39;ll run into with that?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(document).ready(function() {
      $(&#39;#lnkDoIt&#39;).click(function() {
        var $divBottom = $(&#39;#rowBottom&#39;);
        var $divOverlay = $(&#39;#divOverlay&#39;);
        var bottomTop = $divBottom.attr(&#39;offsetTop&#39;);
        var bottomLeft = $divBottom.attr(&#39;offsetLeft&#39;);
        var bottomWidth = $divBottom.css(&#39;width&#39;);
        var bottomHeight = $divBottom.css(&#39;height&#39;);
        $divOverlay.css(&#39;top&#39;, bottomTop);
        $divOverlay.css(&#39;left&#39;, bottomLeft);
        $divOverlay.css(&#39;width&#39;, bottomWidth);
        $divOverlay.css(&#39;height&#39;, bottomHeight);

        $(&#39;#info&#39;).text(&#39;Top: &#39; + bottomTop + &#39; Left: &#39; + bottomLeft);
      });
    });

&lt;!-- language: lang-css --&gt;

    #rowBottom { outline:red solid 2px }
    #divBottom { margin:1em; font-size:xx-large; position:relative; }
    #divOverlay { background-color:Silver; text-align:center;  position:absolute; z-index:10000; opacity:0.5; }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;Overlay Tests&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;p align=&quot;center&quot;&gt;&lt;a id=&quot;lnkDoIt&quot; href=&quot;#&quot;&gt;Do it!&lt;/a&gt;&lt;/p&gt;
        &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;10&quot; cellspacing=&quot;3&quot; style=&quot;position:relative&quot;&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id=&quot;rowBottom&quot;&gt;
            &lt;td&gt;&lt;div id=&quot;divBottom&quot;&gt;&lt;p align=&quot;center&quot;&gt;This is the bottom text&lt;/p&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;div id=&quot;divOverlay&quot; style=&quot;&quot;&gt;&lt;p&gt;This is the overlay div.&lt;/p&gt;&lt;p id=&quot;info&quot;&gt;&lt;/p&gt;&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;



How to overlay a div (or any element) over a table row (tr)?

Is there a rule in CSS that determines the cascading order when multiple classes are defined on an element? (`class=&quot;one two&quot;` vs `class=&quot;two one&quot;`)

Right now, there seems to be no such effect.

Example:  both divs are orange in color on Firefox


    &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
       &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
    
    &lt;html&gt;
      &lt;head&gt;
        &lt;style&gt;
          .one { border: 6px dashed green }
          .two { border: 6px dashed orange }
        &lt;/style&gt;
      &lt;/head&gt;
    
      &lt;body&gt;
    
      &lt;div class=&quot;one two&quot;&gt;
        hello world
      &lt;/div&gt;
      
      &lt;div class=&quot;two one&quot;&gt;
        hello world
      &lt;/div&gt;

Multiple CSS Classes: Properties Overlapping based on the order defined

The CSS2 box model tells us that [adjoining vertical margins collapse](http://www.w3.org/TR/CSS2/box.html#collapsing-margins).

I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed.

What is the purpose of this feature?


What is the point of CSS collapsing margins?

I&#39;ve got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself.  How can I enable the user to click anywhere in the list item to active the link?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #nav {
      background-color: #181818;
      margin: 0px;
      overflow: hidden;
    }

    #nav img {
      float: left;
      padding: 5px 10px;
      margin-top: auto;
      margin-bottom: auto;
      vertical-align: bottom;
    }

    #nav ul {
      list-style-type: none;
      margin: 0px;
      background-color: #181818;
      float: left;
    }

    #nav li {
      display: block;
      float: left;
      padding: 25px 10px;
    }

    #nav li:hover {
      background-color: #785442;
    }

    #nav a {
      color: white;
      font-family: Helvetica, Arial, sans-serif;
      text-decoration: none;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;nav&quot;&gt;
      &lt;img src=&quot;/images/renderedicon.png&quot; alt=&quot;Icon&quot; height=&quot;57&quot; width=&quot;57&quot; /&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Four&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;h2&gt;Heading&lt;/h2&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How do I make the whole area of a list item in my navigation bar, clickable as a link?

I am using a table with alternate row color with this.

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    tr.d0 td {
      background-color: #CC9999;
      color: black;
    }
    tr.d1 td {
      background-color: #9999CC;
      color: black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
      &lt;tr class=&quot;d0&quot;&gt;
        &lt;td&gt;One&lt;/td&gt;
        &lt;td&gt;one&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;d1&quot;&gt;
        &lt;td&gt;Two&lt;/td&gt;
        &lt;td&gt;two&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;

Here I am using class for `tr`, but I want to use only for `table`. When I use class for table than this apply on `tr` alternative.

Can I write my HTML like this using CSS?


    &lt;table class=&quot;alternate_color&quot;&gt;
        &lt;tr&gt;&lt;td&gt;One&lt;/td&gt;&lt;td&gt;one&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Two&lt;/td&gt;&lt;td&gt;two&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;

How can I make the rows have &quot;zebra stripes&quot; using CSS?

Alternate table row color using CSS?

Is there a way to capture when the contents of an iframe have fully loaded from the parent page?

Capture iframe load complete event

I&#39;d like to use the Chrome developer console to look at variables and DOM elements in my app, but the app exists inside an `iframe` (since it&#39;s an OpenSocial app).

So the situation is:

    &lt;containing site&gt;
     &lt;iframe id=&#39;foo&#39; src=&#39;different domain&#39;&gt;
      ... my app ...
     &lt;/iframe&gt;
    &lt;/containing site&gt;

Is there any way to access things happening in that `iframe` from the developer console? If I try to do `document.getElementById(&quot;foo&quot;).something`, it doesn&#39;t work, probably because the `iframe` is in a different domain. 

I can&#39;t open the `iframe` contents in a new tab, because the `iframe` needs to be able to talk to the containing site as well.

Debugging iframes with Chrome developer tools

how do I make an iframe 100% width and height of the window?

how to make a html iframe 100% width and height?

Okay, I have a page on and on this page I have an iframe.  What I need to do is on the iframe page, find out what the URL of the main page is. 

I have searched around and I know that this is not possible if my iframe page is on a different domain, as that is cross-site scripting. But everywhere I&#39;ve read says that if the iframe page is on the same domain as the parent page, it should work if I do for instance:

    parent.document.location

&lt;!-- --&gt;

    parent.window.document.location

&lt;!-- --&gt;

    parent.window.location

&lt;!-- --&gt;

    parent.document.location.href

... or other similar combos, as there seems to be multiple ways to get the same info. 

Anyways, so here&#39;s the problem.  My iframe is on the same domain as the main page, but it is not on the same SUB domain.  So for instance I have

&gt;http:// www.mysite.com/pageA.html

and then my iframe URL is 

&gt;http:// qa-www.mysite.com/pageB.html

When I try to grab the URL from `pageB.html` (the iframe page), I keep getting the same access denied error.  So it appears that even sub-domains count as cross-site scripting, is that correct, or am I doing something wrong?

Access parent URL from iframe

I am trying to change an `&lt;iframe src=... &gt;` when someone clicks a radio button. For some reason my code is not working correctly and I am having trouble figuring out why. Here is what I have:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;

    &lt;head&gt;
      &lt;meta content=&quot;text/html; charset=utf-8&quot; http-equiv=&quot;Content-Type&quot; /&gt;
      &lt;title&gt;Untitled 1&lt;/title&gt;

      &lt;script&gt;
      function go(loc) {
        document.getElementById(&#39;calendar&#39;).src = loc;
      }
      &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
      &lt;iframe id=&quot;calendar&quot; src=&quot;about:blank&quot; width=&quot;1000&quot; height=&quot;450&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot;&gt;&lt;/iframe&gt;

      &lt;form method=&quot;post&quot;&gt;
        &lt;input name=&quot;calendarSelection&quot; type=&quot;radio&quot; onselect=&quot;go(&#39;http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1&#39;)&quot; /&gt;Day
        &lt;input name=&quot;calendarSelection&quot; type=&quot;radio&quot; onselect=&quot;go(&#39;http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1&#39;)&quot; /&gt;Week
        &lt;input name=&quot;calendarSelection&quot; type=&quot;radio&quot; onselect=&quot;go(&#39;http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1&#39;)&quot; /&gt;Month
      &lt;/form&gt;

    &lt;/body&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;



Changing iframe src with Javascript

how to add background image to activity?

I want to use a video as a background instead of an image that automatically stretches to the whole screen (background).


I would also like to rotate videos and images.. so that there is a random video/image displayed in any order.

It would also be nice to know how to delay video playback, so that the video only plays once 30 seconds after the site loaded.


thx!

video as site background? HTML 5

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters?

What I&#39;ve got for the other browsers is:

    background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#444444&#39;, EndColorStr=&#39;#999999&#39;); /* IE6,IE7 */
    -ms-filter: &quot;progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#444444&#39;, EndColorStr=&#39;#999999&#39;)&quot;; /* IE8 */

As a bonus does anyone know Opera&#39;s vendor prefix as well?


Gradients in Internet Explorer 9

Since this post has gotten a lot of attention over the years, I&#39;ve listed the top solutions per platform at the bottom of this post.

---

**Original post**:

I want my node.js server to run in the background, i.e.: when I close my terminal I want my server to keep running. I&#39;ve googled this and came up with this [tutorial][1], however it doesn&#39;t work as intended. So instead of using that daemon script, I thought I just used the output redirection (the `2&gt;&amp;1 &gt;&gt; file` part), but this too does not exit - I get a blank line in my terminal, like it&#39;s waiting for output/errors.

I&#39;ve also tried to put the process in the background, but as soon as I close my terminal the process is killed as well.

So how can I leave it running when I shut down my local computer?

---

**Top solutions**:

* [Systemd](https://stackoverflow.com/a/29042953/339122) (Linux)
* [Launchd](https://stackoverflow.com/a/25998406/339122) (Mac)
* [node-windows](https://stackoverflow.com/a/15616912/339122) (Windows)
* [PM2](https://stackoverflow.com/a/17005935/339122) (Node.js)

[1]: http://kevin.vanzonneveld.net/techblog/article/run_nodejs_as_a_service_on_ubuntu_karmic/


How do I run a node.js app as a background service?

I have a footer div with 100% width. It&#39;s about 50px high, depending on its content.

Is it possible to give that #footer a background image that kind of overflows this div?

The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I&#39;ve already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.

    #footer {
    	clear: both;
    	width: 100%;
    	margin: 0;
    	padding: 30px 0 0;
    	background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
    }

The image is set to the footer, however it doesn&#39;t overflow the div. Is it possible to make that happen?

`overflow:visible` doesn&#39;t do the job!

Can a background image be larger than the div itself?

    &lt;ImageButton android:id=&quot;@+id/previous&quot;
    android:layout_width=&quot;wrap_content&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:src=&quot;@drawable/media_skip_backward&quot;
    android:background=&quot;@drawable/transparent&quot;&gt;&lt;/ImageButton&gt;


This is what I tried to get a transparent ImageButton so as to place those buttons on a SurfaceView. But Eclipse, gives me an error in the project as soon as I include the transparent line in xml.

Please help.

How to have a transparent ImageButton: Android

I wanted to make my windows form transparent so removed the borders, controls and everything leaving only the forms box, then I tried to the BackColor and TransparencyKey to transparent but it didnt work out as BackColor would not accept transparent color. After searching around I found this at msdn:

    SetStyle(ControlStyles.UserPaint, true);
    SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
    SetStyle(ControlStyles.SupportsTransparentBackColor, true);
    this.BackColor = Color.Transparent;
    this.TransparencyKey = BackColor;

Unhappyly it did not work either. I still get the grey or any other selected color background.

All I wanted to do is to have the windows form transparent so I could use a background image that would act as if it was my windows form.

I searched around here and saw many topics in regards opacity which is not what I am looking for and also saw some in regards this method I was trying but have not found an answer yet.

Hope anyone can light my path.

UPDATE:

image removed as problem is solved

Transparent background on winforms?

I can set ImageButton background transparent in `layout.xml` using:

    android:background=&quot;@android:color/transparent&quot;
How I can acomplish same thing using java code?
Something like `ib.setBackgroundColor(???);`

How to set transparent background for Image Button in code?

I&#39;m struggling to create a WebView with transparent background.

    webView.setBackgroundColor(0x00FFFFFF);
    webView.setBackgroundDrawable(myDrawable);

Then I load a html page with 

    &lt;body style=&quot;background-color:transparent;&quot; ...

The background color of the WebView is transparent but as soon as the page is loaded, it&#39;s overwritten by a black background from the html page. This only happens on android 2.2, it works on android 2.1.

So is there something to add in the html page code to make it really transparent ?		

Android WebView style background-color:transparent ignored on android 2.2

Simply, **how to make a TextView transparent?** (Not full transparency)

I searched the docs and the StackNetwork and couldn&#39;t find it?
I guess there is something like this.

Thanks.


**UPDATE**

This is the XML code:

	&lt;LinearLayout
		xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
		android:layout_width=&quot;fill_parent&quot;
      	android:layout_height=&quot;fill_parent&quot;
      	android:gravity=&quot;center_horizontal&quot;
      	android:orientation=&quot;vertical&quot;
      	android:background=&quot;@drawable/background&quot;&gt;
      	
      	&lt;ImageView 
      	android:layout_width=&quot;fill_parent&quot;
      	android:layout_height=&quot;wrap_content&quot;
      	android:id=&quot;@+id/header&quot;
      	android:src=&quot;@drawable/logo1&quot;
      	/&gt;
     	&lt;ListView android:id=&quot;@android:id/list&quot;
        android:layout_width=&quot;fill_parent&quot;
        android:layout_height=&quot;fill_parent&quot;
        android:layout_weight=&quot;1&quot;
        android:paddingRight=&quot;5dp&quot;
        android:scrollbarStyle=&quot;outsideOverlay&quot;
	    android:cacheColorHint=&quot;#00000000&quot; /&gt;
         		
	
        &lt;TextView
        android:id=&quot;@+id/footer&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:textSize=&quot;25sp&quot;
        android:singleLine=&quot;true&quot;
        android:background=&quot;#07000000&quot;
	    android:textColor=&quot;#FFFFFF&quot;
	    android:text=&quot;rrrrr&quot; /&gt;
        
     &lt;/LinearLayout&gt;

I want the **footer** `TextView` to be transparent `so that the ListView items can be seen while scrolling`


Content Type	Original Author	Original Content on Stackoverflow
Question	user345311	View Question on Stackoverflow
Solution 1 - Css	Atom Vayalinkal	View Answer on Stackoverflow
Solution 2 - Css	Patrik Rikama-Hinnenberg	View Answer on Stackoverflow
Solution 3 - Css	Kerry Jones	View Answer on Stackoverflow

Transparent Iframe Body

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Adding a Button to a WPF DataGrid

How to name an object within a PowerPoint slide?

Attributions