use background image for another module

Hello

How do I make a background image for another module in position bottom, similar to header1.

Thanks.

Hi,
this guide may help: https://www.gavick.com/documentation/jo ... ss-suffix/

Thanks, but I meant an image like header1. A great big photo as a background image.

Thanks for helping.

You can build it in many ways.
For example:
1) Add new module Custom HTML
2) In his settings choose BG image
3) In HTML content add your text+links etc. and set min-height
4) Publish on one of available position from template layout

Make Magic Happen

p.s.
Or you can use Parallax module to get even better effect

Hi,
this guide may help: https://www.gavick.com/documentation/jo ... ss-suffix/

Hi Oscar,

Interesting article, but it does not necessarily define the exact suffix for the Header to stretch the background full width versus other modules where the background is only centered.

Could you please give some specifics???

Thanks

About Full with module(s): https://www.gavick.com/documentation/jo ... th-module/

Hi Oscar,

I appreciate if you please could give us an example how to use a parallax module to make a full background module with some text on it, with the same size others modules in the demo have.

Thank you in advance

This may help: http://extensions.joomla.org/search?q=parallax

sorry but this is technical support forum, not customization forum like show me this , do this for me etc.
if you want such a task - hire somebody.

Hi Oscar,

I just though it maybe was a script and suffix in this template to do it. Usually I use "ParallaxScroll Module" extension for this kind of works and work well.

Thank you

you can also use this style - with your image:

Code: Select all

.parallax {
    background-attachment: fixed;
    background-clip: padding-box !important;
    background-color: rgba(0, 0, 0, 0);
    background-image: url("bg_parallax.jpg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    color: #ffffff;
    padding: 90px 0;
}