Gradient background for iframe not working

asked 2014-04-21 05:28:16 +0800

cotupha gravatar image 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 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099cc', endColorstr='#ff9933',GradientType=0 ); /* IE6-9 */
    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">
    <space height="15px"/>
    <image src="/my-logo.jpg" width="740px" height="42px"/>
    <space height="10px"/>
        <hlayout spacing="8px">
            <button id="back" label="one button" autodisable="true"/>
            <button id="next" label="another button" autodisable="true"/>
        <space height="15px"/>
        <hlayout width="70%">
            <label value="The footer"/>

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 flag offensive 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).

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

1 Answer

Sort by ยป oldest newest most voted

answered 2014-04-23 11:28:54 +0800

cotupha gravatar image 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.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2014-04-21 05:28:16 +0800

Seen: 15 times

Last updated: Apr 23 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More