How to set Background Image to Full-Width?

Highlighted
Excursionist
20 0 2

Hello,

 

We are using the custom HTML field as a section on the homepage to embed a newsletter sign-up with a background image.

 

However, even if the width is set to 100%, the container still appears to have some margins around it:

(scroll down to the bottom of the page to see newsletter sign up form):

https://one-tree-planted-staging.myshopify.com/

 

Is there any CSS/HTML code we can apply to make the image extend full width, similarly to the other hero banners we have on the homepage?

 

Any guidance would be greatly appreciated.

 

Thank you,

 

 

 

0 Likes

Hello 

As your store is password protected so I am not able to check the issue.

Can you please let me know the password or DM me password so that will check the issue and let me know. 

 

I think it might be something related to css ie. you can try margin:0; padding:0; to check whether its working.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Excursionist
20 0 2

Hi @oscprofessional ,

 

Thank you for your reply!

We just removed the password from the store, when you have a chance, can you please let us know if you're able to see it?

 

Thanks again!

0 Likes

Hi sofiapc, 

It looks like the custom section is using a .container class before the form with the background-image. Therefore, the form stays within that grid that the .container class creates. 

I would recommend moving your background-image styles to the div wrapping your content such as the ID of the section you're working with. (I'd actually recommend that you create another class to use for this)

 


Screen Shot 2019-07-24 at 2.57.04 PM.pngYour current form has the background image attached to it, while the form itself is within the ".container" div. You want the background on something outside of the container.Screen Shot 2019-07-24 at 3.00.35 PM.pngSomewhat working example. I'm not sure if you'd keep the grey.

 

 

Screen Shot 2019-07-24 at 3.00.48 PM.pngThe class I used in this example.

 

1 Like

Hello 

 

 

.custom-html-section .sixteen.columns {
    padding: 0;
    margin: 0;
    width: 100%;
}

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Excursionist
20 0 2

Thank you both @oscprofessional and @RyanAaronGreen for your help!!

 

It seems that we were finally able to find a solution.

It appears that Shopify's "custom HTML" box (which we are using to embed the HTML newsletter form) is a container with a fixed width, which was not in the theme's scss file.

So I created a new class to push the newsletter container to the exact middle of the browser window and then pull it back to the left edge with negative margin.

 

The only issue now seems to be that the form's input boxes are aligned to the left, despite the fact we are centering it to the right:

https://one-tree-planted-staging.myshopify.com

 

Any ideas as to why this is happening?

 

Thank you again!

 

 

0 Likes

@sofiapc, at quick glace - each of your form fields are using the "float" property in css.

Text align won't affect this property unfortunately, so you'll need to look into working with that styling and perhaps redoing it to move away from using "float." Of course, you may be able to tackle that issue a number of different ways - but that will be the reason it's not behaving as you're expecting. 

1 Like
Excursionist
20 0 2
<style>
    #_form_82_ { font-size:14px; line-height:1.6; font-family:arial, helvetica, sans-serif; margin:0; width:100%}
    #_form_82_ * { outline:0; }
    ._form_hide { display:none; visibility:hidden; }
    ._form_show { display:block; visibility:visible; }
    #_form_82_._form-top { top:0; }
    #_form_82_._form-bottom { bottom:0; }
    #_form_82_._form-left { left:0; }
    #_form_82_._form-right { right:0; }
    #_form_82_ input[type="text"],#_form_82_ input[type="date"],#_form_82_ textarea { padding:6px; height:auto; border:#979797 1px solid; border-radius:4px; color:#000 !important; font-size:13px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
    #_form_82_ textarea { resize:none; }
    #_form_82_ ._submit { -webkit-appearance:none; cursor:pointer; font-family:arial, sans-serif; font-size:14px; text-align:center; background:#333 !important; border:0 !important; -moz-border-radius:4px !important; -webkit-border-radius:4px !important; border-radius:4px !important; color:#fff !important; padding:10px !important; }
    #_form_82_ ._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_82_ ._close-icon:before { position:relative; }
    #_form_82_ ._form-body { margin-bottom:30px; }
    #_form_82_ ._form-image-left { width:100%; float:left; }
    #_form_82_ ._form-content-right { margin-left:164px; }
    #_form_82_ ._form-branding { color:#fff; font-size:10px; clear:both; text-align:left; margin-top:30px; font-weight:100; }
    #_form_82_ ._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_82_ ._form-label,#_form_82_ ._form_element ._form-label { font-weight:bold; margin-bottom:5px; display:block; }
    #_form_82_._dark ._form-branding { color:#333; }
    #_form_82_._dark ._form-branding ._logo { background-image:url('https://d226aj4ao1t61q.cloudfront.net/jftq2c8s_aclogo_dk.png'); }
    #_form_82_ ._form_element { position:relative; margin-bottom:10px; font-size:0; max-width:100%; }
    #_form_82_ ._form_element * { font-size:14px; }
    #_form_82_ ._form_element._clear { clear:both; width:100%; float:none; }
    #_form_82_ ._form_element._clear:after { clear:left; }
    #_form_82_ ._form_element input[type="text"],#_form_82_ ._form_element input[type="date"],#_form_82_ ._form_element select,#_form_82_ ._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_82_ ._field-wrapper { position:relative; }
    #_form_82_ ._inline-style { float:left; }
    #_form_82_ ._inline-style input[type="text"] { width:150px; }
    #_form_82_ ._inline-style:not(._clear) + ._inline-style:not(._clear) { margin-left:20px; }
    #_form_82_ ._form_element img._form-image { max-width:100%; }
    #_form_82_ ._clear-element { clear:left; }
    #_form_82_ ._full_width { width:100%; }
    #_form_82_ ._form_full_field { display:block; width:100%; margin-bottom:10px; }
    #_form_82_ input[type="text"]._has_error,#_form_82_ textarea._has_error { border:#f37c7b 1px solid; }
    #_form_82_ input[type="checkbox"]._has_error { outline:#f37c7b 1px solid; }
    #_form_82_ ._error { display:block; position:absolute; font-size:13px; z-index:10000001; }
    #_form_82_ ._error._above { padding-bottom:4px; bottom:39px; right:0; }
    #_form_82_ ._error._below { padding-top:4px; top:100%; right:0; }
    #_form_82_ ._error._above ._error-arrow { bottom:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #f37c7b; }
    #_form_82_ ._error._below ._error-arrow { top:0; right:15px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #f37c7b; }
    #_form_82_ ._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_82_ ._error-inner._form_error { margin-bottom:5px; text-align:left; }
    #_form_82_ ._button-wrapper ._error-inner._form_error { position:static; }
    #_form_82_ ._error-inner._no_arrow { margin-bottom:10px; }
    #_form_82_ ._error-arrow { position:absolute; width:0; height:0; }
    #_form_82_ ._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_82_ { margin:0; width:100%; min-width:100%; max-width:100%; box-sizing:border-box; }
    #_form_82_ * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:1em; }
    #_form_82_ ._form-content { margin:0; width:100%; }
    #_form_82_ ._form-inner { display:block; min-width:100%; }
    #_form_82_ ._form-title,#_form_82_ ._inline-style { margin-top:0; margin-right:0; margin-left:0; }
    #_form_82_ ._form-title { font-size:1.2em; }
    #_form_82_ ._form_element { margin:0 0 20px; padding:0; width:100%; }
    #_form_82_ ._form-element,#_form_82_ ._inline-style,#_form_82_ input[type="text"],#_form_82_ label,#_form_82_ p,#_form_82_ textarea:not(.g-recaptcha-response) { float:none; display:block; width:100%; }
    #_form_82_ ._row._checkbox-radio label { display:inline; }
    #_form_82_ ._row,#_form_82_ p,#_form_82_ label { margin-bottom:0.7em; width:100%; }
    #_form_82_ ._row input[type="checkbox"],#_form_82_ ._row input[type="radio"] { margin:0 !important; vertical-align:middle !important; }
    #_form_82_ ._row input[type="checkbox"] + span label { display:inline; }
    #_form_82_ ._row span label { margin:0 !important; width:initial !important; vertical-align:middle !important; }
    #_form_82_ ._form-image { max-width:100%; height:auto !important; }
    #_form_82_ input[type="text"] { padding-left:10px; padding-right:10px; font-size:16px; line-height:1.3em; -webkit-appearance:none; }
    #_form_82_ input[type="radio"],#_form_82_ 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_82_ button[type="submit"] { padding:20px; font-size:1.5em; }
    #_form_82_ ._inline-style { margin:20px 0 0 !important; }
    }
    #_form_82_ { position:relative; text-align:center; margin:25px auto 0; padding:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; *zoom:1; background-image:url('https://cdn.shopify.com/s/files/1/0326/7189/t/67/assets/pf-ae598d0b-e1b5-4ff3-a676-2b0ac0139bf4--ONE-TREE-PLANTED-GIFTS-4.png?14362'); background-repeat:no-repeat; background-size:3000px; !important; border:0px solid #b0b0b0 !important; -moz-border-radius:0px !important; -webkit-border-radius:0px !important; border-radius:0px !important; color:#fff !important; }
    #_form_82_ ._form-title { font-size:22px; line-height:22px; font-weight:600; margin-bottom:0; }
    #_form_82_:before,#_form_82_:after { content:" "; display:table; }
    #_form_82_:after { clear:both; }
    #_form_82_._inline-style { width:100%; display:inline-block; }
    #_form_82_._inline-style input[type="text"],#_form_82_._inline-style input[type="date"] { padding:10px 12px; }
    #_form_82_._inline-style button._inline-style { position:relative; top:27px; }
    #_form_82_._inline-style p { margin:0; }
    #_form_82_._inline-style ._button-wrapper { position:relative; margin:27px 12.5px 0 20px; }
    #_form_82_ ._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_82_._inline-form._inline-style ._inline-style._button-wrapper { margin-top:20px !important; margin-left:0 !important; }
    }
   
    #_form_82_ ._submit { -webkit-appearance:none; cursor:pointer; font-family:raleway, sans-serif; font-size:14px; font-weight:bold; line-height:14px; text-align:center; vertical-align:center; background:#ff5a5f !important; border:0 !important; -moz-border-radius:4px !important; -webkit-border-radius:4px !important; border-radius:4px !important; color:#fff !important; padding:10px !important; }
    #_form_82_ ._form_54 { font-size:14px; line-height:1.6; font-family:raleway; margin:0; }
    #_form_82_ ._x51770359 ._form-title { text-align:center; }
    #_form_82_ ._x53654744 label { text-align:center; }
    #_form_82_ ._x53654744 input { text-align:center; }
    #_form_82_ ._field26 label { text-align:center; }
    #_form_82_ ._field26 input { text-align:center; }
    #_form_82_ ._field13 label { text-align:center; }
    #_form_82_ ._field13 input { text-align:center; }
    #_form_82_ ._x74261690 label { text-align:center; }
    #_form_82_ ._x74261690 input { text-align:center; }
    #_form_82_ ._x26236086 ._form-title { text-align:center; }
   </style>

 

Hello @RyanAaronGreen ,

 

Thank you for your reply!

Above I have the code which was provided by our e-mail newsletter app.

So if we remove the "float" properties from the form above, what would you suggest as the best way to the re-style it?

 

(Sorry for all the questions!)

 

Thank you again,

 

0 Likes
New Member
2 0 0

Hi Sofia!

 

Are you please able to screen shot or explain how you managed this? That would be amazing!

 

Thank you

0 Likes