homepage Welcome to WebmasterWorld Guest from 54.242.18.190
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Center Background Image
Scotty13




msg:4428956
 9:18 am on Mar 14, 2012 (gmt 0)

I'm working with a php script that i purchased. In my admin_login.php page is the entry for the image and my entry from my layout.css page. I'm only seeing half my background image. I cant seem to get it centered.

admin_login.php...

5.<div id="container_login">
6. <a href="http://www.example.com" target="_blank" id="login_logo"><img src="<?php echo IMG_PATH; ?>login_logo.jpg" alt="Script " /></a>
7. <div id="main_login">
8. <?php require $content_tpl; ?>
9. </div> <!-- main_login -->
10. </div> <!-- container_login -->
11.
12.layout.css...
13.
14./* login */
15.#container_login{
16. font-family: Arial, sans-serif;
17. font-size: 12px;
18. margin: 0 auto;
19. overflow: hidden;
20. position: relative;
21. max-width: 100%;
22. height: 1306px;
23.}
24.a#login_logo{
25. position: absolute;
26. top: 0;
27. left: 404px;
28. height: 129px;
29. margin: 0 auto;
30. width: 192px;
31.}
32.#container_login #main_login{
33. float: none;
34. margin: 200px auto 0;
35. position: relative;
36. text-align: left;
37. width: 343px;
38.}
39.#container_login h3{
40. font-size: 1.3em;
41. font-weight: bold;
42. margin: 5px 15px;
43. text-transform: uppercase;

I know there's one thing that i didn't do. Can you help me please?

Thanks in advance,
Scotty13

[edited by: alt131 at 6:44 pm (utc) on Mar 14, 2012]
[edit reason] Thread Tidy [/edit]

 

robzilla




msg:4428962
 9:42 am on Mar 14, 2012 (gmt 0)

Somebody correct me if I'm wrong, but I believe
a#login_logo {} should be written as #login_logo a {}. In this case, however, you have connected #login_logo to the <a> element, so you can simply declare #login_logo in your stylesheet, without the anchor reference.
rocknbil




msg:4429080
 3:59 pm on Mar 14, 2012 (gmt 0)

Well, your last suggestion would (should, see below) work but #login_logo a refers to an anchor inside the element #login_logo - #login_logo is the ID'ed element. a#login_logo is correct too. Look:

<a href="" id="login_logo">

If you classed it,

<a href="" class="login_logo">

this would look more common

a.login_logo

Bottom line is unless you have another element ID'ed as login_logo (which you absolutely shouldn't, id's need to be unique, that's what makes them ID's) this should also work.

#login_logo {}

They probably did that because there's other anchors being styled inside the parent container and needed to specify a#[the id].

Returning to the problem: there's a couple things going on. You say "background image" but have in inline image specified:

<a href=""><img></a>

Is that the image you're referring to? Is it because the logo used in the img tag is larger than the container holding it?

a#login_logo{
position: absolute;
top: 0;
left: 404px;
height: 129px;
margin: 0 auto;
width: 192px;
}

Also, anchors are inline elements by default, I don't see where the block property is added, but it should work out if you use an inline image. The anchor element itself just won't actually wrap around the logo and will only have the height of whatever font settings are on this element (use the FireFox Firebux extension to see this effect.)

lucy24




msg:4429165
 6:59 pm on Mar 14, 2012 (gmt 0)

I don't see any reference to a background in your CSS at all. It should say something like: background-image: no-repeat center url(blahblah). Either you've left out a piece-- from the post or from the css itself-- or you're calling something a background that isn't a background.

Scotty13




msg:4429223
 9:47 pm on Mar 14, 2012 (gmt 0)

Thank you BOTH so much. This is my entry and everything is perfect.

/* login */
#container_login{
font-family: Arial, sans-serif;
font-size: 12px;
margin: 0 auto;
overflow: hidden;
position: relative;
max-width: 100%;
height: 825px;
}
#login_logo{
position: absolute;
top: 0;
height: 803px;
margin: 0 auto;
width: 1306px;
}
.

rocknbil




msg:4429610
 4:29 pm on Mar 15, 2012 (gmt 0)

So I'm guessing it was the container being too narrow. cool. :-P

devangan




msg:4430838
 1:31 pm on Mar 19, 2012 (gmt 0)

1 thing remember we can't use margin:0 auto; with position:absolute.

hoangvu




msg:4439910
 7:50 am on Apr 12, 2012 (gmt 0)

let try
background : url (your_image_link) center top;
for center background

Scotty13




msg:4439946
 9:42 am on Apr 12, 2012 (gmt 0)

Got it! Thank you, hoangvu

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved