Banner Image Duplicate

  • 1
  • Question
  • Updated 6 years ago
  • Answered
My banner image is almost showing duplicate at the far right hand side. My dimensions were selected correctly in Photoshop and follow previous instructions to edit them in File Manager but it is still no luck. Any help?

www.walkwithfaith.co.uk
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Vincent,

The fix for this is a minimal workaround. I presume you wish your banner collage to begin at the left margin and end at the right margin?

The problem here is that different people are using different screen resolutions and different screen sizes. Your banner I think is 1090 px wide and my screen for example is 1440 pixels wide, and my screen resolution is set to 1440 x 900, which now has become very average. I presume Yola staff would use even bigger resolution and physically bigger screens, probably 1900 px or bigger.

Your banner is a good width and to accommodate all the viewers you are best to centre this rather than allow it to Left Justify, because it will begin to repeat which is what you are describing and what I am seeing. Different people will have relatively different "white space" at the beginning and end of the banner. With your design that won't detract from the visual presentation.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Vincent

I have checked your Yola website in your Yola account, and created a test page named test1 (don't worry, it's not in your navigation and you can delete it at any time).

There is something strange going on with this Style anyway. When I preview one of your pages, the loading icon will not disappear. Although it says that the banner area is 1109x140px, your banner gets repeated which still happens when I define a width in the Site CSS. We will need to investigate on the Style you chose. You are welcome to select a different Style for your website which will meet your needs better.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Vincent

Our HTML specialist and I tried a few workarounds, and this is what worked on our end:

Try to create a banner with a 1660px width, and upload this banner into the banner area of your Style. This should solve the problem.

Please let us know if you should need further assistance with this.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Vincent,

In addition to Stefan's comment, if you find that by adding an image that is 1660px wide doesn't do the trick, please try the following:

In an HTML Widget, please add the following code:
<style type="text/css">
#sys_banner {
height: 95px;
background-image: url(resources/yourimage.jpg);
background-position: bottom left;
width: 1620px;
}
</style>


Replace "yourimage.jpg" with the name of your 1660px image file.

You will need to add this to each page. If you wish for a simpler way to add the code, we suggest upgrading to Yola Silver. This allows you access to the Site CSS feature enabling to apply the code to all your pages with a single click.

I hope that does the trick. If not, please do get back to us and we'll be glad to help further.
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
Hi.
Thanks for replies. I am wondering is it 1660px by 140px you mean?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. That's what Sanja means Vincent.
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
1660px x 140px image uploaded. Coding put it. Twice as worse.
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
I have. I tried it before putting the CSS. It is still the case. I'm having a play around the CSS and cropping and see what I get. It looks promising.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Good. Keep plugging at it.
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
Have a look at my website now. It's not duplicating anymore BUT my image is not fully showed because my 1660px by 140px image does not fit in so it got cropped.
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
Actually, There is no way of working this round. It really depends on how big people are viewing this. I am on mac and on normal size screen, it just fits but in full screen, It is a little off. So I do not know what to do.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Vincent,

Just reading around this I came across some CSS stuff for backgrounds on About.com

background-repeat: no-repeat;

If you don’t set the background repeat your background image will tile.

Add this to your banner CSS. Make the banner the size that fits your screen and see how this goes?
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
This template has not been developed properly. It is scrolling with the text. Each time you resize the browser, the website content auto adjust which it shouldn't do.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Vincent

The Style you use seems to have some flaws, and we will need to bring this to our specialists' attention. Because it's a Free Style, I suppose that it will not be fixed at short notice.

May I ask you to browse for a different Style to use? I think that would definitely be the best solution in this situation. Not sure if you agree, but I also think we have more attractive Free Styles to offer than this one. When you change the Style, your content will not be lost. You will mabye need to adjust some layout, but that's it, and your banner will be displayed properly if you adapt it to the banner dimensions of your new Style.

Just click on Style > Change Style in the blue menu bar of your Sitebuilder in order to switch to a different Style for your Yola website. I hope this will be an acceptable solution for you.
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
I have seen many recent forum post and seem to have coding scripts for setting height and width onto my website.
Photo of Vincent Lui

Vincent Lui

  • 18 Posts
  • 0 Reply Likes
Hi Sanja,
I thought you would be a great helper on the next problem I have right now.
I am needing to set a height and width on my website. I been researching and found many coding scripts. I heard that the only way to set these, is to paste coding on to a html widget in certain places?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Vincent,

My apologies for the late reply to this. To be honest with you, I don't know if it is possible to set a certain height and width. You can always try adding to an HTML Widget and seeing how this goes.

If you are a Yola Silver subscriber, you can also try adding to your Site Tracking Code area which allows you access to the Head section.

Whichever method you decide, I would advise testing on a test site first in case the code doesn't work and ends up breaking your site. This way, all your time and effort you've put into your site will not be at jeopardy.