CODEWITHSUNDEEP
htmlcssbackground-image
bc110402307 Syed Zeeshan Haide
bc110402307 Syed Zeeshan Haide

Reputation: 454

why background image is displaying on half of screen?

My background image is not covering all contents on my page, rather it's applying only half of the screen.

The same code with same image is properly working on my another page. Only the difference is that i have a lot of content on this page but i think that doesn't matter.

Where is the issue?

Thanks in advance.

html

<html>

<head>

</head>

<body>

<div id="main">
   <!--Here i have multiple sections-->
</div>
</body>
</html>

css

#main {
   position: relative;
}
#main:before {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../..//images/3.jpg) center center fixed; 
    width: 100%;
    height: 100%;
    opacity : 0.2;
filter: alpha(opacity=20);
    z-index: -1;

Upvotes: 2

Views: 9802

Answers (6)

bhanu.cs
bhanu.cs

Reputation: 1365

Here you are using a psudeo element :before .The functionality of psudeo element :before is as follows. It would attach a child node at the first index.In your case you are trying to attach an image before the div element.And this does not correspond to your whole body.

To make the image applicable to your whole body try this:

 body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}

And remove your psudeo element :before 

#main {
   position: relative;
   /*Other CSS Properties*/
}

Upvotes: 1

Rinto Antony
Rinto Antony

Reputation: 297

This method will work

  body
{
margin:0px;

width: 100%;
    height: 100%;

}
#main {
     background-image: url('download.jpg');
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Upvotes: 1

Sridhar
Sridhar

Reputation: 128

Hi, you just try with following CSS snippets 

background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;

Upvotes: 2

nam
nam

Reputation: 55

I guess you have missed a double quote while writing your ID. 

<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>

Upvotes: 0

sms
sms

Reputation: 103

try this one

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

Upvotes: 0

Rinto Antony
Rinto Antony

Reputation: 297

try this code

background-size:100% 100%;

Upvotes: 2

Related Questions