Help Changing a background in a template

[fiveflightsup]

I have a template and the header has a background image but I can't seem to figure out how to place it in my copy.

I searched the main.css file and located it on line 5866.

My version is here
http://stmarkschurchbrooklyn.org/aboutus.html

and I'm trying to replicate this with my background image
http://0effortthemes.com/cross/aboutus.html

Any assistance is greatly appreciated.

[osgood_]

Truely awful file presentation for a template. Anyway I'll tell you where to look - in your 'styles' folder in the site folder there is a css file named main.css. In the main.css file is a css selector named header.s-header, see below (if you can find it - keep scrolling and looking). The idiot that produced this template looks to have included the complete Bootstrap css junk in the main template css file, just to make life hard work for you.

header.s-header {

        position: relative;

        background: url(../images/background/header_background.jpg) fixed;

        background-position: 30% 855px

    }

}

@media screen and (max-width:992px) {

    .slider {

        display: none

    }

    header {

        position: relative;

        background: url(../images/background/header_background.jpg) fixed;

        background-position: 21% 650px;

        background-size: cover

    }

}

Your best best when changing template css styles, which have been presented this badly, is to attached your own linked custom css stylesheet AFTER any of the default css stylesheets and change the css properties in that.

So you would create a css stylesheet named 'custom.css' and save it in the 'styles' folder then link it to the page:

<link rel="stylesheet" href="styles/custom.css">

Then in that styesheet insert the below css selector and change the name of the image from the default name to the name of the image you want to use.

header.s-header {

background: url(../images/background/my_own_bg_image.jpg) fixed;

}

OR simpler:

You could open the default 'header_background.jpg' image, which is to be found in the 'images/background' folder in your favourite photo editing software, use its dimenisons as the guide and produce your own then re-save it as 'header_background.jpg' into the same folder, effectively over-writting the default image.

Good luck.

[BenPleysier · Accepted solution]

Actually, there is no http://stmarkschurchbrooklyn.org/images/background/header_background.jpg

The best and easiest way forward is to place an image called header_background.jpg in the images/background folder.

The rest is irrelevant.

[osgood_]

BenPleysier wrote:

Actually, there is no http://stmarkschurchbrooklyn.org/images/background/header_background.jpg

The best and easiest way forward is to place an image called header_background.jpg in the images/background folder.

The rest is irrelevant.

There should be IF its a template and the OP has downloaded all the necessary files.

The rest is very relevent indeed, even you would not mix up the default Bootstrap css with custom css or maybe you would given your lack of experience and poor workflow?

[BenPleysier]

There should be IF its a template and the OP has downloaded all the necessary files.

Did you check?

The rest is very relevent indeed, even you would not mix up the default Bootstrap css with custom css

Nothing to do with the OP's problem.

maybe you would given your lack of experience and poor workflow?

Funny how quickly this becomes a personal attack on me. I guess your best defence is to belittle me.

Have a good day!

[osgood_]

BenPleysier wrote:

There should be IF its a template and the OP has downloaded all the necessary files.

Did you check?

The template, yes as that is what the OP is presumably trying to replicate. The OPs page, no, not until you mentioned the image.

BenPleysier wrote:

u would not mix up the default Bootstrap css with custom css

Nothing to do with the OP's problem.

Sure its everything to do with the OPs issue. If the main.css was not so packed full of mostly redundant Bootstrap css just perhaps they would have stood a fighting chance of tracking it down, although I have no idea  how they managed to change the footer background image by themselves, where the css is similarly located in the main.css without seemingly any trouble.

BenPleysier wrote:

Funny how quickly this becomes a personal attack on me. I guess your best defence is to belittle me.

Have a good day!

Its well known and a sensible approach that you don't mix up framework css styles with custom css styles and this being a template, being sold mostly to those that are less capable of working with html/css than a skilled developer, makes it even worse and me very annoyed. If you can't see that then sorry what do you expect.

Have a nice day yourself.