handle the css image background overflow

Question

0.00/5 (No votes)

See more:

I created this Facebook landing page for one of my clients and the background seems to be holding the overflow pretty badly. I tried many overflow codes but none of them seem to help. When the Facebook comment box is expanded the page goes crazy. What I need is when the "View More..." button in the Facebook comment box is pressed I want the background to expand and have a black background to the expanded section which will merge invisibly with the existing background

or have the overflow of the comment box handled via scrolling. I tried doing that by embedding the comment box in a iframe which didn't produce results.

All codes are attached below.

HTML Code:

HTML

<head>
  [[style.css]]
</head>

<div align=top style="margin-removed 180px;">
  <div align=left style="margin-removed 460px;">
    <font face="Calibri">
  <div id="WFItem349383" class="wf-formTpl">
    <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=Bmwp"
    method="post">
        <div class="wf-box">
            <div id="WFIheader" class="wf-header el" style="height: 20.1818182468414px; display:  none !important;">
                <div class="actTinyMceElBodyContent">
                    <p style="text-align: center !important;">
                        <span style="font-family: verdana !important; font-size: 14px !important; color: rgb(0, 0, 0) !important;">
                            
                                <span style="line-height: 8px !important; display: inline-block !important;">Silakan Masukkan NAMA & EMAIL Dibawah ini :</span>
                            
                        </span>
                    </p>
                    <p style="text-align: center !important;"></p>
                    <p></p>
                </div>
                </div>
                    </li>
                    <li class="wf-email" rel="undefined" style="display:  block !important;">
                        <div class="wf-contbox">
                            <div class="wf-labelpos">
                                <label class="wf-label">Email:</label>
                            </div>
                            <div class="wf-inputpos">
                                <input type="text" class="wf-input wf-req wf-valid__email" name="email" style="width: 267px"></input>
                            </div>
                            ^__em class="clearfix clearer"__^</em__^
                        </div>
    </li> 
                    <li class="wf-submit" rel="undefined" style="display:  block !important;">
                        <div class="wf-contbox">
                            <div class="wf-inputpos">
                                <!--<input type="submit" class="wf-button" name="submit" value="Saya Mau Tau Rahasianya"
                                style="display:  inline !important; width: 269px !important;">-->
                              <input type="image" src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/USEFULLBUTTONSWHITEfg_zps4213880f.png" class="wf-button" name="submit" style="margin-left: 35px;margin-top: 5px;"> 
                          
                          </input>
                            </div>
                            ^__em class="clearfix clearer"__^
                        </div>
                    </li>
                    <li class="wf-counter" rel="undefined temporary" style="display:  none !important;">
                        <div class="wf-contbox">
                            <div>
                                <span style="padding: 4px 6px 8px 24px; background: removed(https://app.getresponse.com/images/core/webforms/countertemplates.png) 0% 0px no-repeat scroll transparent;"
                                class="wf-counterbox">
                                    <span class="wf-counterboxbg" style="padding: 4px 12px 8px 5px; background: removed(https://app.getresponse.com/images/core/webforms/countertemplates.png) 100% -36px no-repeat scroll transparent;">
                                        <span class="wf-counterbox0" style="padding: 5px 0px;"></span>
                                        <span style="padding: 5px;" name="https://app.getresponse.com/display_subscribers_count.js?campaign_name=planetuang&var=0"
                                        class="wf-counterbox1 wf-counterq">0</span>
                                        <span style="padding: 5px 0px;" class="wf-counterbox2">subscribers</span>
                                    </span>
                                </span>
                            </div>
                        </div>
                        ^__em class="clearfix clearer"__^
                    </li>
                    <li class="wf-captcha" rel="undefined temporary" style="display:  none !important;">
                        <div style="display:  block !important;" wf-captchaerror="Incorrect please try again"
                        wf-captchasound="Enter the numbers you hear:" wf-captchaword="Enter the words above:"
                        class="wf-contbox wf-captcha-1" id="wf-captcha-1"></div>
                        ^__em class="clearfix clearer">
                    </li>
                    <li class="wf-privacy" rel="undefined" style="display:  block !important;">
                        <div class="wf-contbox">
                            <div>
                                <a target="_blank" class="wf-privacy wf-privacyico" href="http://www.getresponse.com/permission-seal?lang=en"
                                style="height: 21px !important; display: inline !important;margin-removed 55px;margin-removed -20px;">We respect your privacy^__em class="clearfix clearer"></a>
                            </div>
                            ^__em class="clearfix clearer">
                        </div>
                    </li>
                    <li class="wf-poweredby" rel="undefined temporary" style="text-align: center; display:  none !important;">
                        <div class="wf-contbox">
                            <div>
                                <span style="display:  none !important;" class="wf-poweredby wf-poweredbyico">
                                    <a target="_blank" style="display:  inline !important; color: inherit !important;"
                                    class="wf-poweredbylink wf-poweredby" href="http://www.getresponse.com/">Email Marketing</a>by GetResponse</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="WFIfooter" class="wf-footer el" style="height: 160px; display:  none !important;">
                <div class="actTinyMceElBodyContent">
                    <p>Copyright by Planetuang.com</p>
                </div>
                ^__em class="clearfix clearer">
            </div>
        </div>
        <input type="hidden" name="webform_id" value="349383" />
    </form>
</div>
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=349383&mg_param1=1&u=Bmwp"></script>

</font>

  </div>
  </div>

	<div align=top style="margin-removed 120px;">
	<div align=left style="margin-removed 10px;">

		<fb:comments href="http://planetuang.com" numposts="3" colorscheme="dark"></fb:comments>
  	
  	</div>
	</div>

	<div align=top style="margin-removed -390px;">
	<div align=right style="margin-removed 40px;">
      
      <a href="http://www.facebook.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Facebooklogo_zpsd9786622.png" width="150px" height="45px" border="0" alt="Facebook" /></a>
      
      <br />
      <br />
      
      <a href="http://www.Twitter.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Twitter_logo_png-5_zps654ec1de.png" width="150px" height="45px" border="0" alt="Twitter" /></a>
      
      <br />
      <br />
      
      <a href="http://www.pinterest.com/husanto" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Pinterest_logo_zps568b5041.png" width="150px" height="45px" border="0" alt="Pinterest" /></a>
      
      <br />
      <br />
      
      <a href="http://www.linkedin.com/in/husanto" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/li_zpsc499f6cf.png" width="150px" height="45px" border="0" alt="LinkedIn" /></a>
      
      <br />
      <br />
      
      <a href="http://www.youtube.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/youtube-channel-logo_zps9ac07079.png" width="150px" height="45px" border="0" alt="YouTube" /></a>

CSS Code:

CSS

body { background: #000 url("http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/BG1_zpsc13e85e5.png") no-repeat center center fixed; }

Posted 8-Jan-15 6:06am
Member 11361928

Add a Solution

1 solution

Please Sign up or sign in to vote.

Solution 1

Accept Solution Reject Solution

I edited the height of the background image to be longer and the problem was then fixed. No thank you to everyone who did not help me.

Permalink

Share this answer

Posted 8-Jan-15 23:20pm
Member 11361928

Add a Solution

Add your solution here

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

OKPaste as

Strip HTML
Encode HTML
Paste as-is
Code block
Quoted Text
Best guess

To display as

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email

Password

Forgot your password?

Your Email

This email is in use. Do you need your password?

Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.

Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 11361928 · Answer 1 · 2015-01-08T23:20:00

Solution 1

I edited the height of the background image to be longer and the problem was then fixed. No thank you to everyone who did not help me.

Posted 8-Jan-15 23:20pm

Member 11361928