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 ?
I reject your reality, and substitute my own.

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.
I reject your reality, and substitute my own.

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

I reject your reality, and substitute my own.

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?
I reject your reality, and substitute my own.

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 :)
I reject your reality, and substitute my own.