Background image in inline box repeating??

[rdaneel72]

Can anyone explain what settings I need to use to stop this image from repeating within the inline box when the browser window size is changed?

It looks fine in Designer

Here are settings for the box and the background image,

This is a Web context that is converted to an XML file for our Connect licensor to send as emails. I have successfully copied and edited the template and the Workflow process, and only this strange issue remains.

I enclosed the image in an inline box so I could add a second box with text to the right.

Any insight would be appreciated

[Marten]

Hello @rdaneel72 ,

Can you share the HTML of the inline box please? Because I’m not able to reproduce the issue when previewing a web content to which I’ve applied something similar, in my web browser.

[rdaneel72]

Marten,

Here is the HTML of the box

<div id="pic" style="float: left; overflow: visible; width: 40%; height: 4.45in; background-image: url(&quot;https://gosunward.org/share/sunward+/sunward+-family.jpg&quot;); background-size: contain; background-position: center top; background-repeat: no-repeat;">
    <br>
</div>

I was able to resolve the issue by adding background-repeat: no-repeat; to the style parameters. I did not see this option in the drop-down menu, but since it is HTML, I was able to fat-finger in the extra style parameters, which is a nice option if you know what you are doing.

I hope to someday know what I am doing.

[Sander]

That should not be necessary since default.css has the following style rule:

* {
	background-repeat: no-repeat;
}

So I’m curious how you are generating the HTML. There are different “inlining” options that control the way style rules are included in the HTML output.

We can also leave it at this if you are already happy, no problem.

[Marten]

Personally I find the MDN Web Docs site quite a useful place for checking out more about a specific CSS property. Take the following webpage, for example:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-repeat

[rdaneel72]

@Sander

I have had this issue before. The stylesheets are not included in the final output, so styling must be done in the HTML.

I am editing a template and Workflow process Ricoh developed for us years ago to send emails. The final output is an XML file which we upload to them, and they use an email client to send these emails on behalf of our client. Therefore, no stylesheets are included in the final output.

That said, and advice on getting an inline box to “snap” to another element.

This document looks great at 100%

But is the window is re-sized, the photo scales down, creating more space between the photo and the text to the right.

I expect this is working as intended, but I do not have the HTML knowledge to fix it. Both of these elements are inline boxes.

What properties in which box should I edit?

EDIT**

Or how about I remove these elements from boxes altogether and set the float properties on the image itself.!!!

Sometimes typing things out on this forum helps me work through the issue. Sorry to waste time and valubale bandwidth.

[Marten]

@rdaneel72

I have had this issue before. The stylesheets are not included in the final output, so styling must be done in the HTML.

I wouldn’t recommend to do that. Instead, you may want to concider the following:

Difference from Designer preview to actual html page

This view does not load the CSS file required for styling. To fix this, either set up a separate workflow using the NodeJS Server input as described, or enable the ‘Embed all resources’ option in the Create Web Content task. The latter ensures that all CSS styles are included directly in the HTML file.

[rdaneel72]

Marten,

Would embedding all resources not dramatically increase the file size of the output XML?

We purposely do not save images with the template; they are URLs linked to images hosted on the client’s website. We had experience where even a simple logo graphic vastly increased the size of the output file, resulting in HTML emails that were so large our Outlook client could not download them.

I also do not see how a stylesheet could be accessed by the output XML. Is that even possible?

Again, this template is a modification of a process designed by Ricoh (our OL licensor) for emails. The template uses a Web context, and the Workflow process changes the emulation to convert the HTML to XML, which we upload to Ricoh. What happens after that is forbidden magic that I do not know about.

Is this an unconventional method?