# Gradient background for iframe not working

cotupha
23 5

Hi everyone!

I have a two components that share a lot of content, so I use a common zul file for defining the shared content and then separate zul files for the details of each of these components. Both components are divs using vlayout.

I defined a gradient background for the body tag in the css for these components (I also use common css for the styling that both components share and separte css for the details that change). The definition is

body, html {
background: #0099cc; /* Old browsers */
background: -moz-linear-gradient(top,  #0099cc 0%, #ff9933 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099cc), color-stop(100%,#ff9933)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0099cc 0%,#ff9933 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0099cc 0%,#ff9933 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0099cc 0%,#ff9933 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0099cc 0%,#ff9933 100%); /* W3C */
color: #BC6C25;}


(Generated with colorzilla)

One of the components is always displayed as a page on its own and the other one inside an iframe. Ok, let's focus only on the iframe one. The general structure is:

<?component name="sharedContentCanCauseOverflow" macroURI="/url/to/shared.zul" inline="true" ?>
<div apply="MyComposerForDiv" align="middle" hflex="1" vflex="1">
<vlayout>
<space height="15px"/>
<image src="/my-logo.jpg" width="740px" height="42px"/>
<sharedContentCanCauseOverflow/>
<space height="10px"/>
<hlayout spacing="8px">
<button id="back" label="one button" autodisable="true"/>
<button id="next" label="another button" autodisable="true"/>
</hlayout>
<space height="15px"/>
<hlayout width="70%">
<label value="The footer"/>
</hlayout>
</vlayout>
</div>


which I set as src of an iframe.

If the content of the iframe fits perfectly, then there's no problem with the background, but when the content is higher and a scrollbar appears, then the content that overflows the iframe does not have the desired background, i.e. just the initially visible part has the right background and then, the part that appears when I scroll, just has a plain blue background. I hope I am being clear.

If I show the exact same component outside the iframe it works fine (the content doesn't overflow, I guess that's why it works), but if I activate chrome dev tools, as the available space shrinks and the content overflows, then the background is not shown as expected.

Also, if I change the background of the main div, then it works, but it shows a weird border (corresponding to the body, I guess) with the bad background.

Any idea on why this happens?

delete retag edit

The site won't let me answer my own question before two days, so, in the meantime, I put the answer here. It was as simple as adding background-attachment: fixed; That way, the background does not scroll with the rest of the page (or iframe).

( 2014-04-21 05:47:01 +0800 )edit

Sort by » oldest newest most voted

cotupha
23 5

It was actually a silly mistake, I only needed to add

background-attachment: fixed;


That way the background does not scroll with the rest of the page.

[hide preview]