Header height

[kadoka66]

Hello,
Awesome theme! I hope I can use this to make my blog about sake.

http://www.sakenotabibito.com

I am having a problem with the header. I would like to put an image inside but whatever image I insert gets blown up and distorted as you can see. The actual height of the image is only 300px. Is there any way to alter the header height? using CSS or html.

[satori]

Hey Kadoka66,

first of all, thank you for the purchase!

The reason why the header image gets distorted is because the header has been programmed to scale up its background to fit the width of the screen. There are two solutions to this:

1). Add some custom CSS:

#main #header-image { text-align: center; }
#main #header-image img { float: none; width: auto !important; }

2). Create a wider image based on the existing one (e.g. 2000px wide), simply inserting the existing image at the center of a blank canvas 2000×300.

Please let me know if the above helps you achieve the intended effect.

Sincerely,
Andrii / Satori Studio

[kadoka66]

Thank you, I think that should do the trick, I will try that and let you know how it turns out.

Would you mind helping me with a second thing,
Is there any way to make the background slider image move together with the rest of the page.
I am thinking that maybe the background attachment property can be set to scroll?

Sorry for so many small requests.

[kadoka66]

Please disregard my last message. I didn’t realise there was an option for this in settings. I have fixed it myself.

[kadoka66]

Hi again, please forgive one final question.
Is it possible, without complete recoding, to have the background-slider image appear on top of the the contents as opposed to underneath? Failing that, is it possible to make the background-slider image scroll with the rest of the site?

I am trying to create a design where the image of the sake bottle sits to the leftside of the content and can be seen clearly without being hidden by the content section, in other words, the content would flow underneath the image.

Thank you for your help.

[satori]

Hey Kadoka66,

making the background image come in front of the content it is not possible from the use back-end options in Tokyo (since the “background” image is intended for the background :) yet it is quite easy to achieve using a small piece of custom CSS: visit the “Appearance -> Editor” admin section, and add this code at the bottom of the file that opens by default (should be “style.css):

#supersized { z-index: 2000; }

After that press the “Update file” button to save the changes, refresh the website, and let me know if it worked.

Sincerely,
Andrii / Satori Studio

[kadoka66]

Thank you for the super fast replies Andrii, amazing service.
When I tried your code as it is, it did not work but adding an ‘!important’ tag after worked.
There must be some other code somewhere which was taking precedence over the stylesheet CSS.

[kadoka66]

Dear Andrii, I now have another problem. The Z-index code worked but now the content below the image has become blocked somehow. Whenever you try clicking the links they do not work.

http://www.sakenotabibito.com

[satori]

Hey Kadoka66,

yes, you’re right, I haven’t thought of that, sorry. There is no way of making the background stay in front of other content and have the content reachable by mouse at the same time, since this is just not how CSS works. An alternative solution would be to create a new layer in the website, declare it as having “position: absolute” and “z-index: 10”, and include the image in there. One more option would be to declare a width limit (in pixels or percentage points) for the existing supersized layer:

#supersized li.activeslide { width: 10% !important; }

yet in this case the bottle may still overlap the content on smaller screens – yet then again you might want to hide the bottle altogether on mobiles and tablets.

Sincerely,
Andrii / Satori Studio

[kadoka66]

Understood. I will try both those solutions. Does it matter where the new layer is placed? I.E. in header.php or mainindex.php?

[Author]

Posts