[Matt MintunParticipant]

Hey!

I was wondering if it’s possible to create a full width & full height (100% of the screen) container with a background using X Theme and Visual Composer? There’d be nothing below it – it’s for a login page. I’ve created many of these using Revolution Slider, but I’d rather not use a slider element for this, especially because I’m not entirely sure how I’d float a login box in the center, however doing it in Visual Composer would be much easier if I could do full width/full height.

My work around right now is to just set it to full width with and image background and then put top and bottom margin big enough to take up MOST full screens (like adding 300px on top and bottom). But I’d like a better option if possible.

Thanks!
Matt

[Matt MintunParticipant]

I actually think I just answered my own question! Here’s the code I put into the CSS for the login page I’m editing:

body {
background-image: url(“/link/to-image.jpg”);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}

If you just add the “body” CSS, you’ll end up with a white bar where your content band is, that’s because even though it’s transparent, the site defaults to the background you set in the customizer. So I had to add this as well:

.x-main {
background-color: transparent !important;
}

It WORKED! Though, I’m interested to know if this is the BEST way to do it?

[ChristianModerator]

Hey Matt,

Yes, that is the best way. Glad you’ve figured it out.

[Matt MintunParticipant]

Thanks!

I updated my code slightly to make it true full width for others who find this!

The other way only made the image as big as the image actually was (no scaling):

body {
background-image: url(“/link/to-image.jpg”) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

[NicoModerator]

Thanks for the tip!

Let us know if you need anything else.

Thanks. Have a great day! 🙂

[Author]

Posts