Nov 21, 2019, 01:31 AM

News:

Stable SMF release ver.: 2.0.15


QUICK NEWS

{NEW} - A new tutorial for Github is ready for your veiwing in the articles section.

{OLD} -New boards have been introduced. Stop on in and check it out.

Video of the week


Internal Links

SMF Sites

Quick Info

Add background image

Started by Ronald, Oct 23, 2019, 07:19 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Ronald

Oct 23, 2019, 07:19 PM Last Edit: Oct 25, 2019, 11:44 AM by Bigguy
Since I lost the forum files, and eventually got the forum back up and running, I also upgrdaed it to the latest github version..

But I did loose a few things, which I am slowing putting them back in.

Now my background image is gone. If I am correct in the Theme was images and I know I have a file for thes background images. Can anyone tell me how it is done again.. I only have the one skin so far..

Skhilled

If you look in your theme's index.css at the beginning of the file usually in /Themes/your_theme/index.css, you'll find the "background" style. It will be similar to this:

background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
 font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
 margin: 0 auto;
 padding: 15px 0;
}

Just change the following URL to where you want to put your background image and upload it there as needed:

url(../images/theme/backdrop.png)
Also, you can use Web Developer in your browser's settings and then click on the background and will tell you where it is (and edit it) as well as where you need to upload it.

Ronald

It works but only covers the top half of the page.

lesmond

This should work better ;)
background: #E9EEF2 url(../images/theme/backdrop.png) fixed;
background-size: 100% 100%;

The only person who got all his work done by Friday was Robinson Crusoe

Ronald

Quote from: lesmond on Oct 25, 2019, 11:39 AMThis should work better ;)
background: #E9EEF2 url(../images/theme/backdrop.png) fixed;
background-size: 100% 100%;

Thanks Les. I came in earlier and found bigguy's post, got what he had, same thing..

Tried one for halloween but it looked nice when I saved it, after installing it it was all distorted.

lesmond

which site you trying it on? can we have a link please.

The only person who got all his work done by Friday was Robinson Crusoe

Ronald

Quote from: lesmond on Oct 25, 2019, 02:01 PMwhich site you trying it on? can we have a link please.

https://seniorforums.ca/index.php#top_section

The image you see is Ok. I had a pumpkin image and it got blown up so much it was distorted.

Skhilled

Try shrinking the image. It hard to help much without seeing what's actually wrong.

nidec

I like your logo, very sweet.  Makes a change from the usual grey haired wrinkly images of seniors

Ronald

Quote from: Skhilled on Oct 26, 2019, 03:00 AMTry shrinking the image. It hard to help much without seeing what's actually wrong.

I think this one is 1527 x 1000

Ronald

Quote from: nidec on Oct 26, 2019, 06:12 AMI like your logo, very sweet.  Makes a change from the usual grey haired wrinkly images of seniors

Thanks, but we all get wrinkled when we get older..hell man I'm 82, bald as a xue ball and loaded wiyj wrinkles.

lesmond

Quote from: Ronald on Oct 25, 2019, 04:17 PMhttps://seniorforums.ca/index.php#top_section

The image you see is Ok. I had a pumpkin image and it got blown up so much it was distorted.

background: #E9EEF2 url(../images/theme/backdrop.png) fixed;
background-size: 100% 100%;

Try adjusting the background-size the first 100% is the width, and the second 100% is the height.

like this..
    background-size: 50% 100%;

Also it may help if you un-check Minimize CSS and JavaScript files in Features and Options

The only person who got all his work done by Friday was Robinson Crusoe

Ronald

Quote from: lesmond on Oct 27, 2019, 06:14 AMbackground: #E9EEF2 url(../images/theme/backdrop.png) fixed;
background-size: 100% 100%;

Try adjusting the background-size the first 100% is the width, and the second 100% is the height.

like this..
    background-size: 50% 100%;

Also it may help if you un-check Minimize CSS and JavaScript files in Features and Options

Thanks much better..