Background picture

Sorry for the question onslaught...I love the parallax engine, but initially for the my site, I just want a simple rectangular background picture in the frontpage header top section with a button and some text for now. I've tried replacing the pictures on the backend resulting in: http://siteground249.com/~thecoll0/protein_data/ I've only replaced the regular size screen picture so far, however can I adjust the container size? I looked at the js file but couldn't find where. I'm just wanting to change it to about the height of the background picture I have in there now proportionally at tablet mobile and desktop sizes. Thanks very much for your time.

But you will use the parallax engine in this header or not? If not - I recommend to use a normal module (mod_custom) on the header_top module position.

I have that up now, the problem there is that it doesn't fill up through the top the way the parallax background did. Is there a way to make it go up around the menu the way the other background did? Thanks!

The background was set in the following selector:

Code: Select all

.loaded.gkp-background-top


then it fills the whole area under the menu etc.

But the image must be really big. You can also use the background-size property:

Code: Select all

background-size: 100% 100%;


but it won't work on the older browsers like IE8 and it will make smaller images blurry.

I can't find the file to place the selector in for that module...Thanks...

The code for the parallax engine is placed in three files:

gk.stuff.css
tablet.css - only the tablet part
mobile.css - only the mobile part

I was able to figure out how to change the image for the parallax background image, http://protein-data.com but I haven't figured out a way to make just a simple area for text on top of the image and a button. Is there a way to just do this through html on the front end? Thanks!!!

You can use for the text element:

Code: Select all

margin: 150px auto 0 auto;