Hi
I am finding that when I bring in a background image for a page, the image shows like this
So what you can see is a thin sliver of the background image, then the navbar
Any idea what is stopping all background images from showing as full size, as the one on my homepage is perfect?
The page is here http://wordpress-102462-558755.cloudwaysapps.com/food-tours/ and the login is in a secure note
cheers
Hi @guybower1,
There is a default bottom border to the navigation area for the Ethos stack which you can get rid of by adding this CSS code:
.x-navbar {
border-bottom: 0;
}
Also, there is a default white background image for some page templates in the Ethos stack which you can override by copying the selectors and setting the background color to transparent:
Hope this helps.
hi Jade
Thanks so much for your reply.
We may be at crossed purposes here though. I am actually wanting the background image to appear at 100% width, which it is, but also 100% of its height, so really nothing whatsoever to do with the navbar’s bottom border. I added that CSS code to the page in question and it simply took away the tiny maybe 1px grey border under the navbar, which is nice to know how to do, but it did nothing to increase the height of the background image. That image is 100% width, but is showing only as as a tiny sliver of its actual height
The odd thing is that on the homepage, which was an installed demo from the Design Cloud, the image for the homepage presents perfectly, yet with no CSS needed to alter it. That image is placed in exactly the same manner, as a page background image before you get into Pro
Any further thoughts on what is stopping the image from being taller?
Thanks so much in advance
Hi @guybower1,
May I know which background you’re referring to? Is it the image under the header, or body backgrounds?
If it’s the body background, then please add this CSS to make the main container transparent,
.page-template-template-blank-4-php .x-main, .page-template-template-blank-5-php .x-main, .page-template-template-blank-6-php .x-main, .page-template-template-blank-8-php .x-main {
background-color: transparent;
}
Then inspect your section and rows in the builder and set their background to transparent too. The body background is already on its 100% width and height, but only covered by the layout that has opaque background colors.
May I know which demo you’re currently referring? It’s because the stack Ethos has opaque background compared to other stacks, which is why it needs a custom CSS like above to make it transparent, then section should have transparent colors as well.
Thanks!
hi Rad
Thanks so much for your reply.
It is neither. It is the tiny image above the navbar. The image is set as a page background from this area below
This is the same way my page background image is set in my homepage and there it looks fine. On this page, it is lucky if you can see 40px of height, yet the image is full width
The stack is Ethos and the demo was Ethos Business. Just not sure why using a page background image on my homepage works fine, yet on another page, it does not.
Thanks so much
Hi @guybower1,
My apologies but I am still unsure what you are referring to when it comes to the background image.
The background image that you have added to the page is actually there but it covered in the content area which was the white background color. Please refer to the screencast I have posted here.
If you apply the code @rad provided:
You should be able to see the background image since the code suggested will set the background color of the content area to transparent which will make your page background visible.
Also, it is normal that you are only seeing a small part of the background image on the header area:
That is because the image is a background image to the page and not a slider or a header image that it is expected to display the entire image above the header area of the site.
If that is what you are trying to achieve, you can make use to Rev Slider. You can create the sliders then set the slider you created to the Slider Setting: Above Masthead:
Hope this helps.
hi Jade
Thanks so much for your reply
Yes, I was referring to the image that is covered. I know it is partially covered by content, but I am hoping to have it sit wholly above the navbar. On my homepage, the background image is added in exactly the same way and is completely visible above the header and does not spill below the navbar.
I am just wondering why this page is different to the homepage. My homepage has a slider above the masthead, but the only thing in the slider is the text which drops in. The image is placed the same way I have done it for the page in question; using the area I supplied a screen grab of. This is why I attempted to add an image above the masthead in the same way.
So is this the only way to add an image above the masthead; doing it in a slider?
The navbar on the homepage was part of the Ethos Business demo I installed, so it is not created as part of a header. Perhaps I should just recreate that navbar in a header and use a header image instead of trying to work around this. All I am trying to do is to have the look on my homepage be replicated throughout the site; naturally with a different image on each page
I’ve not used the Header Builder before, but would assume it would not be overly difficult to build that simple navbar with an image above.
Regards
Hi @guybower1,
Using X, without customization, Slider masthead is the only option.
Yes it would be far easy using Header builder to create the look. You may want to check Better Header series on our youtube channel specially FULLSCREEN HERO.
hi Lely
Thanks so much for your reply.
OK, so be it, so will simply create a slider for each. What’s odd is that you still set the background image in the page edit section as I had already done. The slider already in use does nothing but drop in some text over the image, but the image is not set in the slider itself. Seems a strange way to go about things
Thanks for your reply
Hi @guybower1,
The image we see is the (whole) page body background, we are only seeing that because your slider is transparent.
The background image should be applied to the Slider itself, so you don’t need to put a background-image each page.
https://www.themepunch.com/slider-revolution/slide-background/
Cheers!
Hi Friech
I do appreciate your reply, but what you say is simply NOT the case.
I installed one of your demos from the Design Cloud area; it is called Ethos Business. It has a background image/video set above the masthead and some text which drops into place. That image/video is NOT placed in the slider, but is placed as a page background and the text which drops into place is in the slider…it is the only thing in the slider.
I know how to do this with a slider, but when one of your own templates does it differently for the homepage of that template, I tried to do it the same way for subsequent pages. What I missed was adding the text slider, so the image was as you saw it.
Please take a look at the home page so you can see exactly what I mean. The image is set as a background image in the page edit area and the slider has nothing but text in it. When I tried this same technique without adding the text slider, you got the result you saw. That was the purpose of my post, to find out why my image was not showing as it does on my homepage.
It is not helpful to be told that the image must be applied to the slider, when quite obviously, this is not the case; your own demo template shows it. It is absolutely possible to only apply text to the transparent slider and put the background image in the background image area.
Thanks for your time
Hi @guybower1,
Thank you for your explanation of the matter and I do agree that the method used with a body background image and a transparent full-screen slider works.
I checked the page below:
http://wordpress-102462-558755.cloudwaysapps.com/food-tours/
It seems that you already managed to create the feature by the same method, which is a transparent slider and the background image.
I am confused now about the request itself. Would you please kindly state your need at this stage so we can check and follow up?
Sorry for this message but I am not sure what should we do now at the stage
Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
