Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
Like Tree2Likes

Thread: How do I put image in background and sign up form in the middle of the image?

  1. #1
    Junior Member
    Join Date
    Sep 2017
    Posts
    7
    Member #
    57446

    How do I put image in background and sign up form in the middle of the image?

    I suppose the problem is pretty simple for people with some experience in web design. I however have been grappling with the issue from a few days.

    What I want to do is quite simple. I want an image to be in the background and sign up form in the middle of the image.

    However that's just not happening.

    Here's the code for the image. The sign up form code is pretty long and I suppose that's not necessary. Just copied it from the autoresponder.

    <html>
    <head>
    <title>CSS image placement</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css" media="screen">
    body {
    background-image: url(http://www.khostdiscount.com/wp-cont...r-cyan-2.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top:400px;
    margin-bottom:50px;
    }

    </style>
    </html>
    </head>

    Increasing the padding just pushes down the sign up form lower and image height and width attributes don't seem to work. I am at a loss to understand what needs to be done.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The perennial question on centering.

    Fortunately, developments over the last several years have made it easier to do.

    You can combine the calc() function and viewport units to do this much more easily. Now, to do this, you need to know the overall size of the form. So, let's say the form is 300px tall. On the form itself, set the position value to relative and then:
    Code:
    top: calc(50vh - 150px);
    That's the low level answer. It should at least get you there. Essentially what you're doing is offsetting the form halfway down the viewport, and then backing it up half of its own height. That will make it sit right in the center vertically. To center horizontally, use 50vw and half the form's width.
    KG60 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Sep 2017
    Posts
    7
    Member #
    57446
    I didn't understand most of what you said. Thanks for helping me. It's not that the form should be exactly at the center just that the form should be somewhat visible near the top or slightly without making the user scroll down.

    Could you give me the code and tell me where to put it?

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Post all of your code so I can see it, with a full description of exactly what you want it to look like.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Sep 2017
    Posts
    7
    Member #
    57446
    Thanks for taking an interest. I want the sign up form to either appear just shortly as the image starts that is near the top or in the middle.

    Code:
    <html>
    <head>
       <title>CSS image placement</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
       <style type="text/css" media="screen">
       body {
          background-image: url(http://www.khostdiscount.com/wp-cont...r-cyan-2.jpg);
          background-repeat: no-repeat;
          background-position: left top;
          padding-top:400px;
          margin-bottom:50px;
       }
    
    </style>
    </html>
    </head>
    
    <style>
     #_form_1_ { font-size:14px; line-height:1.6; font-family:arial, helvetica, sans-serif; margin:0; }
     #_form_1_ * { outline:0; }
     ._form_hide { display:none; visibility:hidden; }
     ._form_show { display:block; visibility:visible; }
     #_form_1_._form-top { top:0; }
     #_form_1_._form-bottom { bottom:0; }
     #_form_1_._form-left { left:0; }
     #_form_1_._form-right { right:0; }
     #_form_1_ input[type="text"],#_form_1_ input[type="date"],#_form_1_ textarea { padding:10px; height:auto; border:#D54E21 1px solid; border-radius:4px; color:#D54E21!important; font-size:13px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
     #_form_1_ textarea { resize:none; }
     #_form_1_ ._submit { -webkit-appearance:none; cursor:pointer; font-family:arial, sans-serif; font-size:17px; text-align:center; background:#D54E21!important; border:0 !important; -moz-border-radius:4px !important; -webkit-border-radius:4px !important; border-radius:4px !important; color:#fff !important; padding:8px 27px !important;  }
     #_form_1_ ._close-icon { cursor:pointer; background-image:url('https://d226aj4ao1t61q.cloudfront.net/esfkyjh1u_forms-close-dark.png'); background-repeat:no-repeat; background-size:14.2px 14.2px; position:absolute; display:block; top:11px; right:9px; overflow:hidden; width:16.2px; height:16.2px; }
     #_form_1_ ._close-icon:before { position:relative; }
     #_form_1_ ._form-body { margin-bottom:30px; }
     #_form_1_ ._form-image-left { width:150px; float:left; }
     #_form_1_ ._form-content-right { margin-left:164px; }
     #_form_1_ ._form-branding { color:#fff; font-size:10px; clear:both; text-align:left; margin-top:30px; font-weight:100; }
     #_form_1_ ._form-branding ._logo { display:block; width:130px; height:14px; margin-top:6px; background-image:url('https://d226aj4ao1t61q.cloudfront.net/hh9ujqgv5_aclogo_li.png'); background-size:130px auto; background-repeat:no-repeat; }
     #_form_1_ ._form-label,#_form_1_ ._form_element ._form-label { font-weight:bold; margin-bottom:5px; display:block; }
     #_form_1_._dark ._form-branding { color:#333; }
     #_form_1_._dark ._form-branding ._logo { background-image:url('https://d226aj4ao1t61q.cloudfront.net/jftq2c8s_aclogo_dk.png'); }
     #_form_1_ ._form_element { position:relative; margin-bottom:10px; font-size:0; max-width:100%; }
     #_form_1_ ._form_element * { font-size:14px; }
     #_form_1_ ._form_element._clear { clear:both; width:100%; float:none; }
     #_form_1_ ._form_element._clear:after { clear:left; }
     #_form_1_ ._form_element input[type="text"],#_form_1_ ._form_element input[type="date"],#_form_1_ ._form_element select,#_form_1_ ._form_element textarea:not(.g-recaptcha-response) { display:block; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;  }
     #_form_1_ ._field-wrapper { position:relative; }
     #_form_1_ ._inline-style { float:left; }
     #_form_1_ ._inline-style input[type="text"] { width:150px; }
     #_form_1_ ._inline-style:not(._clear) + ._inline-style:not(._clear) { margin-left:20px; }
     #_form_1_ ._form_element img._form-image { max-width:100%; }
     #_form_1_ ._clear-element { clear:left; }
     #_form_1_ ._full_width { width:100%; }
     #_form_1_ ._form_full_field { display:block; width:100%; margin-bottom:10px; }
     #_form_1_ input[type="text"]._has_error,#_form_1_ textarea._has_error { border:#f37c7b 1px solid; }
     #_form_1_ input[type="checkbox"]._has_error { outline:#f37c7b 1px solid; }
     #_form_1_ ._error { display:block; position:absolute; font-size:13px; z-index:10000001; }
     #_form_1_ ._error._above { padding-bottom:4px; top:-41px; right:0; }
     #_form_1_ ._error._below { padding-top:4px; top:100%; right:0; }
     #_form_1_ ._error._above ._error-arrow { bottom:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #f37c7b; }
     #_form_1_ ._error._below ._error-arrow { top:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #f37c7b; }
     #_form_1_ ._error-inner { padding:8px 12px; background-color:#f37c7b; font-size:13px; font-family:arial, sans-serif; color:#fff; text-align:center; text-decoration:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
     #_form_1_ ._error-inner._form_error { margin-bottom:5px; text-align:left; }
     #_form_1_ ._button-wrapper ._error-inner._form_error { position:static; }
     #_form_1_ ._error-inner._no_arrow { margin-bottom:10px; }
     #_form_1_ ._error-arrow { position:absolute; width:0; height:0; }
     #_form_1_ ._error-html { margin-bottom:10px; }
     .pika-single { z-index:10000001 !important; }
    
    
    
    
    
     @media all and (min-width:320px) and (max-width:667px) { ::-webkit-scrollbar { display:none; }
     #_form_1_ { margin:0; width:100%; min-width:100%; max-width:100%; box-sizing:border-box; }
     #_form_1_ * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:1em; }
     #_form_1_ ._form-content { margin:0; width:100%; }
     #_form_1_ ._form-inner { display:block; min-width:100%; }
     #_form_1_ ._form-title,#_form_1_ ._inline-style { margin-top:0; margin-right:0; margin-left:0; }
     #_form_1_ ._form-title { font-size:1.2em; }
     #_form_1_ ._form_element { margin:0 0 20px; padding:0; width:100%; }
     #_form_1_ ._form-element,#_form_1_ ._inline-style,#_form_1_ input[type="text"],#_form_1_ label,#_form_1_ p,#_form_1_ textarea:not(.g-recaptcha-response) { float:none; display:block; width:100%; }
     #_form_1_ ._row._checkbox-radio label { display:inline; }
     #_form_1_ ._row,#_form_1_ p,#_form_1_ label { margin-bottom:0.7em; width:100%; }
     #_form_1_ ._row input[type="checkbox"],#_form_1_ ._row input[type="radio"] { margin:0 !important; vertical-align:middle !important; }
     #_form_1_ ._row input[type="checkbox"] + span label { display:inline; }
     #_form_1_ ._row span label { margin:0 !important; width:initial !important; vertical-align:middle !important; }
     #_form_1_ ._form-image { max-width:100%; height:auto !important; }
     #_form_1_ input[type="text"] { padding-left:10px; padding-right:10px; font-size:16px; line-height:1.3em; -webkit-appearance:none; }
     #_form_1_ input[type="radio"],#_form_1_ input[type="checkbox"] { display:inline-block; width:1.3em; height:1.3em; font-size:1em; margin:0 0.3em 0 0; vertical-align:baseline; }
     #_form_1_ button[type="submit"] { padding:20px; font-size:1.5em; }
     #_form_1_ ._inline-style { margin:20px 0 0 !important; }
     }
     #_form_1_ { position:relative; text-align:left; margin:25px auto 0; padding:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; *zoom:1; background: rgba(255, 255, 255, 0) !important; border:0px solid #b0b0b0 !important; width:500px; -moz-border-radius:0px !important; -webkit-border-radius:0px !important; border-radius:0px !important; color:#000 !important; }
     #_form_1_ ._form-title { font-size:22px; line-height:22px; font-weight:600; margin-bottom:0; }
     #_form_1_:before,#_form_1_:after { content:" "; display:table; }
     #_form_1_:after { clear:both; }
     #_form_1_._inline-style { width:auto; display:inline-block; }
     #_form_1_._inline-style input[type="text"],#_form_1_._inline-style input[type="date"] { padding:10px 12px; }
     #_form_1_._inline-style button._inline-style { position:relative; top:27px; }
     #_form_1_._inline-style p { margin:0; }
     #_form_1_._inline-style ._button-wrapper { position:relative; margin:27px 12.5px 0 20px; }
     #_form_1_ ._form-thank-you { position:relative; left:0; right:0; text-align:center; font-size:18px; }
    
     @media all and (min-width:320px) and (max-width:667px) { #_form_1_._inline-form._inline-style ._inline-style._button-wrapper { margin-top:20px !important; margin-left:0 !important; }
    
     }
    .bottomtext p{
        color:"#000000 !important;
        font-size:17px !important;
        text-align:center !important
    }
    .bottomtext .bottomred{
        color:"#FF0000 !important;
        font-size:16px !important;
        margin-top:10px !important;
    }
    
    </style>
    Last edited by Ronald Roe; Sep 23rd, 2017 at 04:18 PM.

  7. #6
    Junior Member
    Join Date
    Sep 2017
    Posts
    7
    Member #
    57446
    Code:
    <form method="POST" action="https://flyreallycheap.activehosted.com/proc.php" id="_form_1_" class="_form _form_1 _inline-form  _dark" novalidate>
      <input type="hidden" name="u" value="1" />
      <input type="hidden" name="f" value="1" />
      <input type="hidden" name="s" />
      <input type="hidden" name="c" value="0" />
      <input type="hidden" name="m" value="0" />
      <input type="hidden" name="act" value="sub" />
      <input type="hidden" name="v" value="2" />
      <div class="_form-content">
        <div class="_form_element _x95131256 _full_width _clear" >
          <div class="_form-title">
                  </div>
        </div>
        <div class="_form_element _x34561637 _full_width _clear" >
          <div class="_html-code">
            <p>
              
            </p>
          </div>
        </div>
        <div class="_form_element _x49534177 _full_width " >
          
          <div class="_field-wrapper">
            <input type="text" name="email" placeholder="Type your email" required/>
          </div>
        </div>
        <div class="_button-wrapper _full_width">
          <button id="_form_1_submit" class="_submit" type="submit">
            Submit
          </button>
        </div>
        <div class="_clear-element">
        </div>
      </div>
        <div class="bottomtext">
    
        <p class="bottomred">Only for international flights</p>
        <p>(Have questions? Mail me at george@flyreallycheap.com)</p>
    </div>
        
    
      <div class="_form-thank-you" style="display:none;">
      </div>
      
    </form><script type="text/javascript">
    window.cfields = [];
    window._show_thank_you = function(id, message, trackcmp_url) {
      var form = document.getElementById('_form_' + id + '_'), thank_you = form.querySelector('._form-thank-you');
      form.querySelector('._form-content').style.display = 'none';
      thank_you.innerHTML = message;
      thank_you.style.display = 'block';
      if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) {
        // Site tracking URL to use after inline form submission.
        _load_script(trackcmp_url);
      }
      if (typeof window._form_callback !== 'undefined') window._form_callback(id);
    };
    window._show_error = function(id, message, html) {
      var form = document.getElementById('_form_' + id + '_'), err = document.createElement('div'), button = form.querySelector('button'), old_error = form.querySelector('._form_error');
      if (old_error) old_error.parentNode.removeChild(old_error);
      err.innerHTML = message;
      err.className = '_error-inner _form_error _no_arrow';
      var wrapper = document.createElement('div');
      wrapper.className = '_form-inner';
      wrapper.appendChild(err);
      button.parentNode.insertBefore(wrapper, button);
      document.querySelector('[id^="_form"][id$="_submit"]').disabled = false;
      if (html) {
        var div = document.createElement('div');
        div.className = '_error-html';
        div.innerHTML = html;
        err.appendChild(div);
      }
    };
    window._load_script = function(url, callback) {
        var head = document.querySelector('head'), script = document.createElement('script'), r = false;
        script.type = 'text/javascript';
        script.charset = 'utf-8';
        script.src = url;
        if (callback) {
          script.onload = script.onreadystatechange = function() {
          if (!r && (!this.readyState || this.readyState == 'complete')) {
            r = true;
            callback();
            }
          };
        }
        head.appendChild(script);
    };
    (function() {
      if (window.location.search.search("excludeform") !== -1) return false;
      var getCookie = function(name) {
        var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)'));
        return match ? match[2] : null;
      }
      var setCookie = function(name, value) {
        var now = new Date();
        var time = now.getTime();
        var expireTime = time + 1000 * 60 * 60 * 24 * 365;
        now.setTime(expireTime);
        document.cookie = name + '=' + value + '; expires=' + now + ';path=/';
      }
          var addEvent = function(element, event, func) {
        if (element.addEventListener) {
          element.addEventListener(event, func);
        } else {
          var oldFunc = element['on' + event];
          element['on' + event] = function() {
            oldFunc.apply(this, arguments);
            func.apply(this, arguments);
          };
        }
      }
      var _removed = false;
      var form_to_submit = document.getElementById('_form_1_');
      var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false;
    
      var getUrlParam = function(name) {
        var regexStr = '[\?&]' + name + '=([^&#]*)';
        var results = new RegExp(regexStr, 'i').exec(window.location.href);
        return results != undefined ? decodeURIComponent(results[1]) : false;
      };
    
      for (var i = 0; i < allInputs.length; i++) {
        var regexStr = "field\\[(\\d+)\\]";
        var results = new RegExp(regexStr).exec(allInputs[i].name);
        if (results != undefined) {
          allInputs[i].dataset.name = window.cfields[results[1]];
        } else {
          allInputs[i].dataset.name = allInputs[i].name;
        }
        var fieldVal = getUrlParam(allInputs[i].dataset.name);
    
        if (fieldVal) {
          if (allInputs[i].type == "radio" || allInputs[i].type == "checkbox") {
            if (allInputs[i].value == fieldVal) {
              allInputs[i].checked = true;
            }
          } else {
            allInputs[i].value = fieldVal;
          }
        }
      }
    
      var remove_tooltips = function() {
        for (var i = 0; i < tooltips.length; i++) {
          tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);
        }
          tooltips = [];
      };
      var remove_tooltip = function(elem) {
        for (var i = 0; i < tooltips.length; i++) {
          if (tooltips[i].elem === elem) {
            tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);
            tooltips.splice(i, 1);
            return;
          }
        }
      };
    Last edited by Ronald Roe; Sep 23rd, 2017 at 04:19 PM.

  8. #7
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    So from looking at the code you are trying to get a background image to be just behind the form correct?

    In which case do this:

    Body{
    Margin:0;
    Padding:0;
    Background-image:url(‘http://unsplash.it/1600x900’);
    Background-size:cover;
    Background-position:Center Center;
    Background-repeat:no-repeat;
    }

    Doing that will put a background image filling up the whole of the body and show the background image.

    Hope that helps.


    Sent from my iPhone using Tapatalk
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  9. #8
    Junior Member
    Join Date
    Sep 2017
    Posts
    7
    Member #
    57446
    Quote Originally Posted by m3n0tu18 View Post
    So from looking at the code you are trying to get a background image to be just behind the form correct?

    In which case do this:

    Body{
    Margin:0;
    Padding:0;
    Background-image:url(‘http://unsplash.it/1600x900’);
    Background-size:cover;
    Background-position:Center Center;
    Background-repeat:no-repeat;
    }

    Doing that will put a background image filling up the whole of the body and show the background image.

    Hope that helps.


    Sent from my iPhone using Tapatalk
    I implemented your code but that isn't working.

  10. #9
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by frontierbud View Post
    I implemented your code but that isn't working.
    What’s it doing? Have you replaced your code with my one? Do you have a link to the page you are trying to achieve? It will be easier to diagnose.


    Sent from my iPhone using Tapatalk
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  11. #10
    Senior Member
    Join Date
    Feb 2006
    Posts
    791
    Member #
    12463
    Liked
    296 times
    I am still at a loss as to what is going on here. At line 16 I see the OP closing his HTML document and at line 17, closing the head section. What am I missing? I cannot see where anything will show up other than the background image.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 02:45 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com