MemberVault ADVANCED Try some CSS before you buy! Adding a background image to the welcome area

Adding a background image to the welcome area

Turn this:

Into this:

Alright, I'll be the first to admit that this is a little ugly - so promise me that you'll pick a prettier image :)

To make this work, you'll need an image URL - in this example I'm using Unsplash. If you have the image on your computer, upload it to your website or any image hosting platform to retrieve the URL.

Once you have that, you'd need to add this snippet to Settings -> General -> Advanced Settings -> Custom CSS:


div#mv_welcome_area {
 background: url(https://images.unsplash.com/photo-1586809784406-0665c2d5d819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
 background-repeat: no-repeat;
   background-size: cover;
}

You might also want to left-align the welcome text - in that case, add this as well:

div#mv_welcome_area .hidden {
display: none;}


The fine print

When you're adding an image to any area that has other elements (like text and buttons in this case), it's super important to keep in mind that whatever looks wonderful on your desktop, might look messy on mobile - so make sure to test! If you're using a nonfigurative pattern or texture, it's less of an issue, but if you're using an image with people or objects on it, it can get squished and weird-looking.

To deal with this, one option is to add code that'll make sure that the image is only used on large enough screens. You can do this by wrapping the code above like this:

@media screen and (min-width: 800px) {

/*Code comes here*/

}

Essentially, this would make sure that the image is only displayed when the screen size is 800px wide and above - and for smaller screens, you'll see the background color you set in the settings.

Now, the exact value is going to depend on the image that you're using, so you'd need to find the smallest screen size where your image still looks good, and use that as min-width. The welcome text jumps to full width at 1024px, so that would be a good starting value. So, putting it all together, you'd paste:

@media screen and (min-width: 1024px) {

div#mv_welcome_area {
background: url(https://images.unsplash.com/photo-1586809784406-0665c2d5d819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
background-repeat: no-repeat;
   background-size: cover;
}

}

4 Lessons

Try some CSS before you buy!

Want a little taste of the magic of CSS? Try these snippets for free to uplevel the look and feel of your account!

Next Lesson
Lessons for this module 4
RSVP now! (All-access pass: $129)

Already have access to this product?    Sign In Here


Personal Information

Payment Options

 $129.00 USD

How do you want to pay?

PayPal
No payment method needed.
I consent to have this website store my submitted information so Juci can respond to my inquiry. I understand that by submitting this form, I am going to be subscribed to the Code & Glitter newsletter and occasionally receive e-mails regarding the news, happenings, shenanigans, and offers going down at the Code & Glitter HQ. I understand that I can unsubscribe anytime.
Pay 0.00

Other Available Products

My Products Available Products
Sign In

Sign In Details

Forgot Password