Login Page Background Image Custom CSS

Viewing 13 replies - 1 through 13 (of 13 total)
  • WPyogi

    (@wpyogi)

    12 years, 6 months ago

    Try using an absolute file path for the background image, and change the order of those CSS attributes:

    background: url("") repeat scroll 0 0 #FBFBFB;

    Thread Starter Audrey_Ann

    (@audrey_ann)

    12 years, 6 months ago

    I probably sound pretty simple but how do I find the absolute file path for the image?

    Thank you so much for your help!!

    WPyogi

    (@wpyogi)

    12 years, 6 months ago

    Upload the image to your media library – and then on the image’s screen, you’ll see a box/field on the right side “File URL” – copy that URL and put in the CSS url ("IN HERE").

    Thread Starter Audrey_Ann

    (@audrey_ann)

    12 years, 6 months ago

    Thank you! Yeah that’s what I was doing… For some reason that’s still not working, do you think that it could be a plugin issue? It’s just so confusing because everything else I’ve done works…now I will say I had an issue using “traditional” css on the button, and I ended up using something like: 

    #login .button {
	width: 260px;
	height: 44px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	float: center;
	border: 1px solid #3d5a5a;

    etc.

    Does the pound symbol do something different?

    WPyogi

    (@wpyogi)

    12 years, 6 months ago

    Yes, pound sign is for ID’s and periods are for classes. Using a browser tool like Firebug should show you the classes/ids or any other CSS affecting any element on the page.

    Thread Starter Audrey_Ann

    (@audrey_ann)

    12 years, 6 months ago

    Ok, I’m looking with firebug and it doesn’t even show an element for the background… the only CSS affecting the page is what I’ve inserted and the code for the functions of the login box… I’m so confused.

    WPyogi

    (@wpyogi)

    12 years, 6 months ago

    The background image IS working on this page:

    http://www.manifestationconnection.com/wp-login

    Try clearing your browser cache.

    Thread Starter Audrey_Ann

    (@audrey_ann)

    12 years, 6 months ago

    I’m sorry, I Think I’m giving you the wrong link:

    http://www.manifestationconnection.com/wp-login.php?action=register

    On every other page in my site, I do have a working background image, but on the login/register page it isn’t showing up even when I add custom CSS.

    I’m not sure what’s going on because every other CSS I’ve added has worked, but like I said, for some reason a background doesn’t appear to be even showing as an element.

    I appreciate your hep so far, I hope that we’ll be able to get this resolved!

    WPyogi

    (@wpyogi)

    12 years, 6 months ago

    Looks like this has an error in it:

    .login h1 a {
	background-image: url('http://www.manifestationconnection.com/?attachment_id=118');
	background-size: 330px 207px;
	width: 330px;
	height: 207px;
}

    Thread Starter Audrey_Ann

    (@audrey_ann)

    12 years, 6 months ago

    Is that the wrong CSS for login. h1 a? Is there a better code to use that wouldn’t cause the error

    I’m sorry, I’m a pretty major novice with CSS…I don’t know what a lot of that means and/or how I can fix it. I really appreciate you taking the time to help me out!!

    WPyogi

    (@wpyogi)

    12 years, 6 months ago

    Actually, forget that. But I don’t see the background image on that page’s CSS:

    body.login {
    background: none repeat scroll 0 0 #FBFBFB;
    min-width: 0;
}

    But see if this will work – add it to this:

    body.login-action-register {
   ...
}

    Thread Starter Audrey_Ann

    (@audrey_ann)

    12 years, 6 months ago

    It’s still not quite working….I think it might be a plugin issue. I’m going to try out a different approach to customizing the login page.

    I really appreciate ALL of your help! Thank you so much! If I come back to this plugin and try to figure it out again, I’ll be sure to let you know! Thank you!!!!

    mangoman

    (@mangoman)

    12 years, 4 months ago

    Did you figure this out and get it to work? We’d all love to see it in action! 😉

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Login Page Background Image Custom CSS’ is closed to new replies.