News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Index background image

Started by njtweb, May 18, 2018, 12:56:01 PM

Previous topic - Next topic

njtweb

Trying to add a background image from default theme images folder. It shows up when I'm editing index.css. But when I save it, it doesn't show up.


/* Set a fontsize that will look the same in all browsers. */
body
{
   background-image: url("http://www.youthhockeyinfo.com/Themes/default/images/kids.png");
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 92%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 15px 0;
}

d3vcho

Try removing the "background" property that is written right below "background-image" property and see if that works out.
"Greeting Death as an old friend, they departed this life as equals"

vii

Quote from: d3vcho(void) on May 18, 2018, 01:00:10 PM
Try removing the "background" property that is written right below "background-image" property and see if that works out.

Ditto.

I was just about to post that while monkeying with OPs CSS file locally in Firefox, it doesn't show up unless background: is gone. Also, your background-image line is not currently present in index css file. I tested it with background-image only and it did work.

njtweb

Ok, progress.

That worked, but!

It removes the gradient blue and rounded corners on the forum body.

This is a png with transparent background. I want to still keep the forum rounded corners and the gradient blue at the top of the default theme.

njtweb

Quote from: Virginiaz on May 18, 2018, 01:09:37 PM
Quote from: d3vcho(void) on May 18, 2018, 01:00:10 PM
Try removing the "background" property that is written right below "background-image" property and see if that works out.

Ditto.

I was just about to post that while monkeying with OPs CSS file locally in Firefox, it doesn't show up unless background: is gone. Also, your background-image line is not currently present in index css file. I tested it with background-image only and it did work.

It does work but notice in the screener the forum body top rounded corners are gone and the top gradient blue is gone because I removed the "background" css and replaced with my image.

njtweb

Quote from: Virginiaz on May 18, 2018, 01:09:37 PM
Quote from: d3vcho(void) on May 18, 2018, 01:00:10 PM
Try removing the "background" property that is written right below "background-image" property and see if that works out.

Ditto.

I was just about to post that while monkeying with OPs CSS file locally in Firefox, it doesn't show up unless background: is gone. Also, your background-image line is not currently present in index css file. I tested it with background-image only and it did work.

I see what the problem is. The gradient that I want to keep is this backdrop.png and it's set to repeat.

Is there any way for me to lay my .png image over that?

njtweb

This does the trick. Obviously you'll want to make the hex color changes that work on your site.


/* Set a fontsize that will look the same in all browsers. */
body {
  height: 100vh;
  background-color: #E9EEF2;
  background-image: url(../image/image.png), linear-gradient(#375976, transparent);
  background-repeat: no-repeat;
  background-size:cover;
  font: 92%/130% "Verdana", "Arial", "Helvetica", sans-serif;
  margin: 0 auto;
  padding: 15px 0;
}

Advertisement: