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;
}
Try removing the "background" property that is written right below "background-image" property and see if that works out.
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.
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.
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.
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?
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;
}