Putting a background image like a watermark using Xtreme

[Arro]

Does anyone know about putting a background image on this page like a watermark? How will that affect smartphone and mobile user experiences? Thank you.

[scrambler]

You are not saying where you want the background image…

In the overall background (blue area), or in the content? If in the content is t just the are below the menu bar?

Without the “Plus” plugin, the way to add a background image is to add the CSS (like below) in the area BG CSS+ box

{background:url(ImageUrl) no-repeat;}

The options needed inside that rule like cover or contain, positioning etc,… will depend on what you want to achieve . Once the image is in place in the right area we can refine based on what you want

[Arro]

The idea is to locate the watermark only in the content area just below the menu bar extending down to where the agent names are listed in red.

I will create the image, upload it so it has a URL, and post again here to insert the code options per your instructions.

Is there a way to control the degree of opacity or intensity of the watermark?

What will happen when using a mobile or smartphone? Will the watermark still be visible?

[scrambler]

For the opacity, the easiest is create a semi transparent image with the opacity you want, and save it in the .png format to retain that opacity.

Then place the rule below in Main option > Content areas > Content area BG CSS+ box

{background:url(ImageUrl) top left no-repeat;}

[Author]

Posts