Fullscreen image background

[JGCPH]

Hello. I am using the wide layout and would like know, if its possible to use a fullscreen image as background. Right now my solution is to place an image as background inside a row on the page, but maybe there is better solutions. Thanks

[Catalin]

Hello,

Using visual composer is the way to do it. You can also hide header and footer from the page from the page options, if you want to do that.

Thank you,
Catalin

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

Attachments:

You must be logged in to view attached files.

[JGCPH]

Yes. So now i have a fullscreen image as background set in the Row settings. This is fine, the only thing is, that I would like to get the image to fill the screen – not only horisontal, but also vertically. It seems like the only option is to set a minimum height, but this creates some issues of scrolling on small screens and a gap on larger screens.

[writekelly]

I’ve been wrestling with this also. Depending on how you’re planning to use the background (and if it differs from page to page) I think a temporary solution might be to apply the 100% height to background of the main body tag in the child theme css. Not the most flexible option…

@JGCPH–Sort of related…Do you have any issues with css overrides? I still can’t get child theme settings to stick even using !important. Settings in the app.css file in the main theme won’t give up control and Abe previously mentioned I don’t need to create a child-theme version of app.css.

Without finding whatever is preventing a few style override issues, I’m not too confident in making some seemingly simple css adjustments such as the full screen background cover you’re looking for.

[Catalin]

Hello,

@writekelly: adding css rules in the style.css file from your child theme folder overrides the CSS of the theme. Please send me admin credentials to your website to be able to replicate your issue and provide you a solution.

@JGCPH: what page you are referring to from your website. Please point me the link and I will be able to provide you a solution.

Thank you,
Catalin

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

[ConnorMasterson]

Did anyone find a solution for the background image to scale to fit the browser? My understanding is that the container must be filled in order to fill the screen, but how can we trick the container to expand the background image to fit the browser? This is what my site looks like now, and I simply want to remove the white space, without adding a gap that would cause smaller screens to scroll.

Attachments:

You must be logged in to view attached files.

[Abe]

You want to fit the browser height? make sure you have latest KLEO theme version and latest included Visual composer and when you click to edit the Row element in Visual composer. See the image http://7thqueen.com/public-files/gabi/2015-08-10-ddovk.png

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[rizi]

@abe full height row won’t scale down properly in small screens(not responsive). I have the same problem and searching the solution on this forum.

[Abe]

Hi, If you want to scale the text and images then the best solution is to use Revolution slider for that.

The option for the Row from VC doesn’t have responsive settings for text.

Cheers

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts