Issue with forum background image and custom image display

[Guest]

Hello. I am having an issue with the way my forum background image and a custom image on my homepage are being displayed. My forum background is displaying tiled instead of as one image. The custom image on my homepage is not staying within the border of the body on the homepage and is stretching beyond it. It doesnt seem to have this issue on desktops using chrome, but shows this issue displaying on all other devices and browsers including mobile devices. Is there a way that I can force my forum background image to display as one image on all browsers and displays as well as force my custom image on the body of my homepage, to stay within the borders of the body where I have set it? My forum homepage is linked below.

http://redwhiteandbruce.forumotion.com/

Also, here is a screenshot of how it is being displayed via android devices, as well as mobile devices.

[Guest]

If I've posted in the wrong area, please let me know as I am fairly new to the forum. Thanks.

[SLGray]

Did you check the box called fixed background when you entered the image's URL?

[Guest]

Hello. Yes I did.

[SLGray]

What is the dimensions of the image?

[Guest]

Forum background image or the custom image?

[SLGray]

Background image.

[Guest]

Custom image's dimensions are 1024x293. Background image dimensions are 1024x682.

Problem is, both seem to be displaying normally on desktop browsers but not on any other devices, i.e. mobile, android, iAnything.. Background image is tiling on smaller displays and the custom image below my header, is expanded beyond the border as shown in the screenshot.

[Ange Tuteur]

Hello Blusky,

If you want these elements to display at fixed sizes for different resolutions you will need to use percentages. Try adding this to your style sheet :
Display > Colors > CSS stylesheet

Code:

.panel.introduction .mes-txt img { width:80% }
body {
  background-repeat:no-repeat;
  background-size:100%;
}

The first rule is to adjust the image width so it doesn't break outside of the intro panel. You can adjust the percent(80%) as you wish. The second rule is to fit the background image to the screen.

[Guest]

Hello Ange. Forgive my inexperience but where would I insert this in the stylesheet? I know how to get to the style sheet in the admin panel but I don't know if there is a specific place within the stylesheet to place the code. Again I apologize for my lack of knowledge buy thank you for your help.

[Whistler]

Go to your Administration Panel then go to Display > Colors > CSS stylesheet add to the top of your CSS stylesheet the code.

Hope this helps

[Guest]

Hello Fish Crazy. Yes that did help, thank you kindly for your response!

Ange, custom image is now set and staying within the border of the intro. panel., thanks for that!

Background image is now no longer tiling, however is now only covering 50% of the display on all devices other than desktop browsers. Is there a way to configure it to fill the screen, without tiling, on mobile devices/iPads? I've attached a screenshot below of how it is displaying. Thanks again for your help and time.

[SLGray]

When I view the page source for your forum's homepage, it is set to 50% for the background image.

no repeat scroll 0 50%

[Guest]

I'm not sure why it is set like that. I did not modify anything for the background other than setting "fixed" for the image and the code that was provided earlier. Is there something I could be missing?

[Ange Tuteur]

In the body rule, replace :

Code:

background-size:100%;

by :

Code:

background-size:100% 100%;

This will stretch the image so it fits the screen. If you don't want this, remove :

Code:

background-repeat:no-repeat;

Instead, so the image repeats itself.

[Guest]

Hello Ange. I made the change as instructed but still the same issue. The devices I'm having this display issue with are listed below if that has any relevance.

Kindle Fire
Droid Razr Maxx
iPad2

[Ange Tuteur]

I made a test with responsive design in Firefox, and it fit to many different resolutions. It could be that the background-size property is not supported for your device. If that's the case you'll most likely have to repeat the image, or keep it as is.