[Ed VParticipant]

Hi,

Trying to set up a website similar to your demo site: http://theme.co/x/ , with a one-page layout, and a ‘home’ page consisting of a full screen background image with text displayed on top of it. (Pages below the homepage don’t need the background image).

Can’t get things to work though…

Any ideas on how I would set this up?

Kind regards,
Ed

[ChristianModerator]

Hey Ed,

Thanks for writing in.

It is setup using [content_band] shortcode. Please see page 19 of X Documentation.

You put the URL of the image you want to use as a background in bg_image=”” like

[content_band bg_image="http://yourimage.com/address"] Your text [/content_band] 

Hope that helps. 🙂

[Ed VParticipant]

Thanks for your quick reply.

I already tried it the way you suggested it. However, this way the background image doesn’t appear full-screen as on the demo-site. (It only fills the area behind the text, which (if there’s is only a limited amount of text) can be just a small portion of the screen). Is it possible to create a full-screen background image, no matter how much text there is to display?

Ed

[RubinKeymaster]

Hey Ed,

this is most likely happening because your Page Template is not set to “No Container | Header, Footer” try changing it and don’t forget enabling the inner container function on the content band so your content is in a container so the code would look like:

[content_band bg_image="http://yourimage.com/address" inner_container="true"] Your text [/content_band]

[Ed VParticipant]

Unfortunately, that doesn’t do the trick either. It shows like this:

http://webcellent.nl/tlu/Clipboard01.jpg

I would very much like the background image to be stretched out across the screen, like on de the demo-site’s homepage.

Is this possible?

[RubinKeymaster]

Are you talking about the full page slider on the first load on Integrity 1 and our sales page? We got a video tutorial about this in our Video Tutorials section under Customizer > Sliders.

[Ed VParticipant]

I think I can create the effect I’m looking for with that. Thanks!

[ChristianModerator]

You’re welcome Ed. 🙂

[Dan SParticipant]

Is there an optimum size for background images?

[RubinKeymaster]

Hey Dan,

we recommend 1200px width at minimum to make sure that the images stay sharp on bigger displays / retina. But if you add a little blur to your images you can make them smaller that’s a nice trick.

[Author]

Posts