Forum Support

Shape 5
March 28, 2024, 12:11:16 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Set a full-width background image in a custom html module  (Read 825 times)
shecmt
Jr. Member
**
Offline Offline

Posts: 33



« on: December 21, 2015, 01:58:33 PM »

Hi, I'd like to make a Custom HTML module and set a background image for it that spans the full browser width of Top Row 1. It would be like Top Row 1 in your older "Cleanout" template that I used for this site: http://sovhope.com/.

I know I can globally set backgrounds for each row in Template Settings, but I need a different image in that row on each page of my site. Is there a way to set the background image for just a specific page?

Thanks for your time!
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: December 22, 2015, 01:57:38 PM »

Hello,

Wow nice job on the church site using the cleanout template!

There isn't a way to do a specific background for specific pages in Vertex so yes you would need to do the module method.  To do so full width you would need to open up your index.php file and remove the class s5_wrap as this will constrain the width of this position:

Code:
<div id="s5_top_row1_area_inner" class="s5_wrap">

Then you can add any HTML/CSS you need and publish to any of the top row 1 positions and it will get the full width left to right.

Let me know if you need any further help
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
shecmt
Jr. Member
**
Offline Offline

Posts: 33



« Reply #2 on: December 22, 2015, 02:41:57 PM »

Awesome, thanks Jonah! I'll try that out.
Logged
shecmt
Jr. Member
**
Offline Offline

Posts: 33



« Reply #3 on: June 14, 2016, 04:33:15 PM »

Hi Jonah, earlier in in the year I followed your suggestion and removed the class s5_wrap on the site I was working on. It worked great, except I had to manually adjust the height for different screen sizes to keep the image behind the text as the browser window got smaller.

On the homepage for the site I am using the Eventful Template Settings to set the image in top_row3 and it has an option to set the background to background-size: cover so that the image height changes for different screen sizes. Is there a way to accomplish this automatic height change after removing the class s5_wrap?

Thanks so much for your time!
« Last Edit: June 21, 2016, 03:18:33 PM by shecmt » Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #4 on: June 15, 2016, 11:35:59 AM »

I'm not exactly sure what you are asking in regards to the s5_wrap and height because the s5_wrap only sets a width on rows, we never set a height on rows as content would then be restricted. The background-cover option is the way to go for responsive. We use it on all our demo's when we put background images on rows. Let me know if I'm not understanding your question.

Thanks,
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
shecmt
Jr. Member
**
Offline Offline

Posts: 33



« Reply #5 on: June 15, 2016, 12:14:31 PM »

Sorry, I was definitely not very clear. I've removed the s5_wrap so that I can use unique background images in each row. Where should I put the code "background-size: cover" so that it effects the background image of a module?

Let me know if that helps. Thanks.

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #6 on: June 16, 2016, 12:13:51 PM »

Oh ok well if you are using a Vertex row you can just set this in the admin area of Vertex for that row. If you've added your own custom row then you'd just add that CSS to whatever DIV your background image is applied to.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.