Shape 5

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!

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:


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

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

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!

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,

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.

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.