Header background image

[Aristoto]

I uploaded a header background image (1190 x 250)using the Theme Options.
I set the header background colour to transparent. Yet the image is not displayed. What am I doing wrong?

[Radu]

Hi,

Can you please provide a screenshot and a link to that page to can see the behaviour ?

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Aristoto]

Hi Radu.
Website: globalfuta.net
Username: Alex
Password: futa123

I couldn’t style and position the Header text where I want it, just next to the logo on the left side of the header. It defaults to the right side. The two lines text I want should be fairly large (approx 24px) with separate formats, occupying the left half of the header. Is this possible with custom CSS?

I created a new logo combined with text but it was reduced to logo size after uploading. That is what you will see up now. Not what I want.

I created a (1120×250) image of text only so I can place it as header background. However the image is not getting displayed.

I have attached a couple of snapshots

[Radu]

Hi,

You can set a header background image with this css

COPY CODE

.kleo-navbar-fixed .page-boxed .kleo-main-header {
    background-image: url(http://icdn2.digitaltrends.com/image/nikon-d750-sample-image-008-1500x1001.jpg);
    background-position: 0 50%;
}

And with this css you can control the size of the logo width and height

COPY CODE

#header .logo img {height:70px;with:auto;}

Replace values with your desired values

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Aristoto]

1.With logo size 1000×234, I was able to accomplish attachment 1. Increasing the header height from 88 (default) to 200 didn,t make any difference. The height of menu bar was increased but not the remainder of the height. (I’ve been looking for a way to reduce the height and colour the menu bar, separate topic)

2. Attachment 2 shows the result of using a header image of recommended size (1190×100) and the custom CSS you provided with background-position: 50% 0%;
It is repeating.

3. What I want to achieve is shown in Attachment 3

Thanks for the support.

Regards,

Alex

[Radu]

Hi,

Can you please provide your website url to can see the behaviour ?

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Aristoto]

Thanks I was able to fix the header image by adding to the CSS
background repeat:no-repeat;
There are still other issues.
Sticky menu is interfering with the header image and the image is not fully responsive. See attached screenshot

[Radu]

Hi,

I cannot see how that logo behaviour, do you have changed the logo ?

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts