Pro - header above navbar

Hi there,
so I started using X without Pro and all I tried to achieve was to put a header image above my menu. Width has to be 100% and the image should scale proportially on all resolutions and never crop parts of the image.

I tried using a css method with background image (I think to the logo bar, but im not sure) but the image didnt scale the way I desired.
Next thing I did was trying to use the Revolution Slider which did exactly what I wanted - sadly, it reloades the image whenever I switch sides. That’s not something I want to have.

Then I read about the Header Builder in Pro and was ready to give it a try for the extra 20 bucks.

I also red about changing the standard stack view via php but I already updated to Pro at that point and I couldnt find the php files the thread was talking about in the pro theme folders.

So I started using the Header Builder from Pro:

I tried to assign a background image to Bar 1 with my header image. First result was that the height was the standard row hight of a Bar, so it croped my header image at a certain height. Then I tried to set a fixed height for the bar - but when I changed the width of the browser to simulate mobile application, the sides of my header image got croped instead of just scaling it proportionally.

Long story short - I really need some help with this. Preferably without the header builder as it seems really hard to redo the menu I created with the standard X Renew Stack. This menu works really great, responsive … i just like it. But in the end, I’ll take any route as long as I get my desired header image on top of my side :slight_smile:

I hope I covered everything - I spend 2 nights now trying to figure it out and google just doesnt want to help me with this. Please ask if I didnt give all the info required.

Big thanks in advance,
Marc

Hello Marc,

Thanks for writing in! The only way you can achieve what your want it to have the image a background image for a slider or for a bar. The method will always make sure that the image will display fullwidth. There is no guarantee however that the image will not be cropped because thats not how the background image works.

With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

By default, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Most users is using an empty slider, insert a background image for the slider and assigned the slider above the masthead. You can check that out here:

Hope this helps.

Thanks @RueNel - that helped quite a bit.

I got a good result with using a background image for the logo bar.
Still interested in your suggestion about using an empty slider for Revolution Slider and adding a background image there via CSS.
I didnt manage to do it, maybe you can help.

What I did:
Created an empty, transparent Slider.
Went to Slider CSS / JS and typed in:

{
background: url(“http://timelash-event.de/images/timelash4-header-doctor-who-con-center2.jpg”) no-repeat;
background-size: cover;
}

It did nothing, so any help would be great.
Thanks again,
Marc

Hey Marc,

You do no need to input any custom js/css in the slider. Please insert the background image right in the slider settings. To know more how you can use background images in Rev Slider, please check out this documentation:
https://www.themepunch.com/revslider-doc/main-background/

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.