The background image of my forum repeats itself all over. How can I fix it?

How do I make it all one image and not alot of repeating pictures? http://alohaspirit.forumotion.com/forum

Hello @mialink

That depends on what part of the forum you want to do it. May you please tell us where do you want to do this? If you need to do screenshots in order to explain yourself don't hesitate to do so

Best regards.

mpelmmc wrote:Hello @mialink

That depends on what part of the forum you want to do it. May you please tell us where do you want to do this? If you need to do screenshots in order to explain yourself don't hesitate to do so

Best regards.

Just the main page you can see the background img how its in a bunch of boxes and not one big picture

Hello,

Add this to your CSS:

Code:

body {background-repeat: no-repeat;}

This way only one image will show. However, you'll need to find an image large enough so it fulfills the whole forum. You can as well add the following to the code so the image will cover the whole forum, but it might look weird:

Code:

    background-size: cover;

I have edited your topic title so it will be easier to find in the Search bar

Best regards

@mialink you mean a body background? I'd recommend you to use as less image as possible or in case you still wanna put a background image, then add this to your CSS

Code:

body {
background: url('image-link.jpg') no-repeat fixed center/cover;
}

Background image won't repeat, center and auto scale depending on screen size

That didn't work. I do appreciate your help.

@mialink Most of them seems to understand what you mean, but I do not understand what you want to do. Do you want to make main background of the forum not repeating or you want something else? Please be more specific.

mialink wrote:That didn't work. I do appreciate your help.

Hey mialink!
Can you try this code in your CSS and see if it will fix it?

Code:

body {
background: url('https://i.servimg.com/u/f63/14/99/32/60/beach211.jpg') no-repeat fixed center/cover; !important
}

It is just an edit of what @SarkZKalie gave you.

Hope this helps!

Cheers,
James

No it didn't work

mialink wrote:No it didn't work

Again, what you want to do. Please be more precise.

Did you see how the picture in the background looks? Its repeating itself, needs to be one big image. I even tried a larger image and it still repeats. I changed the width of the forum, it helped a little. The leaves are suppose to be showing.

mialink wrote:No it didn't work

Did you add the background image using CSS or did you add it through the image gallery in the Admin Panel?

Pick one image from: Free Stocks
Then, when you opoen image, do not download, right click on image address. Go to css:
Do this in body:

Code:

body {
background-image: url("https://images.pexels.com/photos/691574/pexels-photo-691574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
repeat:no-repeat;
background-size: cover;
background-position: 50% 50%;
}

 Find:

Code:

body {
    background-attachment: fixed;
    background-color: #c7c7c7;
    background-image: url(https://i.servimg.com/u/f63/14/99/32/60/beach214.jpg);
}

 Replace with:

Code:

body {
    background-attachment: fixed;
    background-color: #c7c7c7;
    background-image: url(https://i.servimg.com/u/f63/14/99/32/60/beach214.jpg);
    background-size: 100% 100%;
}

The background looks really bad as the image is really small and to stretch it make it go all pixilated

screen shot of your forum with this code added

Was the background image added by CSS or the other way?  If it was the other way, did you click the box for fixed image?

Other Way:  AP > Display > Pictures & Colors > Pics Management (advanced mode)

I put fixed. it helped a little. I changed the background. I was wanting to use it for a fall beachy look. I will deal with it later. thank you

mialink wrote:I put fixed. it helped a little. I changed the background. I was wanting to use it for a fall beachy look. I will deal with it later. thank you

Have you tried removing that image from your Pictures Management section in ACP and just have the picture be added through the CSS Codes we have provided and see if that works?

May I mark this as solved, @mialink?