Apr 22, 2019, 08:00 pm

News:

Keep an eye on your notifications page. It can get huge.


QUICK NEWS

{NEW} -Lot's of changes to the site. From the front page to the theme.

{OLD} -We are open. Stop on in and say hi.

Video of the week


Internal Links

SMF Sites

Quick Info

Background Image

Started by LandyVlad, Feb 06, 2019, 10:09 pm

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

LandyVlad

Feb 06, 2019, 10:09 pm Last Edit: Feb 07, 2019, 12:14 am by Bigguy
I have probably asked this before, elsewhere, but...

How do I put a background image on my forum, just as you've done here ?

Bigguy

Give me a sec and I will post the css for it.

Bigguy

Feb 06, 2019, 11:22 pm #2 Last Edit: Feb 07, 2019, 12:21 am by Bigguy Reason: Edited code
Right at the top of the index.css file this is what I have:

html {
background:  #0C3E61;
}
body {
background:url(https://www.yoursite.com/image.jpg) #0C3E61;
    background-attachment: fixed;
    background-size: 100% 100%;
font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;
}

I fixed the background image, gave it a different color to match the image and added the url. :) This should be what you want.

LandyVlad

Thanks muchly.

In the line
background:url(https://www.yoursite.com/image.jpg) #0C3E61

What's that hash value do?

Oh and
Quote from: Bigguy on Feb 06, 2019, 11:22 pmI fixed the background image, gave it a different color to match the image and added the url.

Looking at this forum (SMFH) The URL is black on a very dark background so I can't see it.

as for giving the background a different colour to match the image - I presume you mean the main logo - but I haven't noticed any background colour change.

Bigguy

Sometimes when the page loads the background image sort of stalls for a minute and loads in last. Before it loads in the background goes white, which is the default color. I changed the color to blue. So now when the page loads and the image is slow you see a blue background instead of plain old white.

LandyVlad


Bigguy

Yes and you will. If you clear your browser cache you might be able to see a flash of blue before the background image loads up when you refresh the page.

LandyVlad

so the image in that code example goes in the public html directory, yes?

Bigguy

Yes but you can put the image anywhere you want, as long as the url points to it. A lot of people put all images in the Themes/default/images directory to keep things clean.

lesmond

Quote from: LandyVlad on Feb 08, 2019, 01:11 amWhat's that hash value do?

Thats for the colour ie. #000000 would be black and #ffffff is white

LandyVlad

Cheers les yeah I knew that but was really getting at what it does in that particular place, which bg answered :)