Forum Support

 
Advanced Search


[1]

Offline shecmt
Free Member
Posts: 33
Posted 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

Offline jonahh
Free Member
Posts: 23789 WWW
Posted 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

Offline shecmt
Free Member
Posts: 33
Posted on: December 22, 2015, 02:41:57 PM

Awesome, thanks Jonah! I'll try that out.
Logged

Offline shecmt
Free Member
Posts: 33

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

Offline jonahh
Free Member
Posts: 23789 WWW

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

Offline shecmt
Free Member
Posts: 33

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

Offline jonahh
Free Member
Posts: 23789 WWW

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
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.023 seconds with 22 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
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.