'Background-image not working for css id but for css body

in the .CSS File:

when i apply

body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100% 100%;}

the background-image:url('Images/Login_Background.jpg'); works fine

But as soon as i make a id like:

#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}

and when my <section id="login"> uses this css id; the background: url('Images/Login_Background.jpg'); style doesn't works!!!

Am i going wrong somewhere which i am not able to spot? Got tired from this!!!

htmlcssbackground-imagerelative-path


Solution 1:[1]

not sure what is the result you are expecting but you can't see the background in the div

  1. because of the background-repeat: no-repeat; property, here is a demo without it: http://jsfiddle.net/dBRQw/

  2. height of the element, keep in mind that an empty div has the height of 0px (unless you specify a value for it or it has content in it) and in this case you won't be able to see the background, like here: http://jsfiddle.net/dBRQw/1/

and this is probably gives you the issue, as you use also use the background-position: center center; property and this sends your 100px sized background to the center of that element

http://jsfiddle.net/dBRQw/2/

I have set the width and height of the div to 900px so you can see the background at the center. To sum it up, your issue might be because your element has no height or has no content in it that makes him as 0px height by default.

hope this helps you.

Solution 2:[2]

Replace 

#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}

with

#login {
background-image:url(Images/Login_Background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;
}

It Should Work Fine...!!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions