looping banner? am confused

[Soxittome]

Hello everyone,


I been here around like 10 years or so. I noticed my banner looping itself but never cared till today. I wanted to know how to make my banner not looping. It runs into the same image over and over. I just want it one image and not looping over and over.


Thank you guys.


My site is here so you can see the banner
www.soxittome.proboards.com

[Star's Legacy]

Soxittome,
You can adjust your forum width to make it smaller by going to admin > colors and theme creator and this will help with the banner.

[Lynx]

Another option is to go to your Admin > Themes > Advanced Styles & CSS > Stylesheet (tab) and try pasting this at the bottom:


/* Adjust banner to no repeat and cover */
#banner {
  repeat: no-repeat;
  background-image: cover;
}


I think I got that CSS right. Be sure to save. If it doesn't work, check in the Visual Editor tab (same page) under: Forum > Header (Top) > Forum Banner > Banner Image > Background Repeat and select no repeat from the selection dropdown box. Lastly, if it's not covering the entire area, go back to the Stylesheet tab and change the background-image: cover; to background-image: cover !important;. Let us know if that works for you.

[Soxittome]

Thanks again. That might be easier. Don't like the look of width smaller on my forum but that. did work.

[Lynx]

Nov 20, 2016 20:31:32 GMT -8 Soxittome said:

Thanks again. That might be easier. Don't like the look of width smaller on my forum but that. did work.

Taking a look, your banner is set to repeat-x - which is why it's repeating. If you set it to no repeat as outlined above, if it no longer repeats, you can leave out the repeat: no-repeat; line in the code box above.

[Soxittome]

I cant figure out how to stretch it. is the only problem

[Lynx]

Did you try putting this at the bottom of your stylesheet:


#banner {
  background-image: cover;
}


Be sure you're editing the correct theme (in case you have more than 1 theme installed).

[Lynx]

My bad! That CSS is suppose to be:


#banner {
  background-size: cover;
}


Sorry about that!

[Soxittome]

am not sure where to enter that at. every place I put it at. It doesn't do anything

[Lynx]

Go to Admin > Themes > Advanced Styles & CSS - there should be 2 tabs: Visual Editor and Stylesheet. Click on the Stylesheet tab. Go all the way to the bottom and add a new line (so it's under everything else). Once you have a new line there, paste in code above (my most recent post prior to this one). Be sure you are on the correct theme (it should be listed in a dropdown near the top) and be sure to save after pasting in the code. You'll need to refresh the page (front-end) after the save to see the change.

If you need further elaboration, just let me know and we'll get you there.

[Soxittome]

At the end! gotcha, woulda never guessed. I got it fixed now.

[Lynx]

Glad you got it fixed!