PDA

View Full Version : Can't make background 100% of the page



edi365
02-28-2015, 07:10 PM
I'm trying to make the background 100% of the page.
It means that all of the picture will show without the option to scroll to see the rest (because all of the picture is shown).
I'm not a native english speaker so It may be a little difficult to understand what I'm saying.

Here is the code:


<img id="bgimg" src="img/bg.jpg" alt="" class="bg" data-lead-id="background-img" />

I always made it 100% like that:


<img id="bgimg" src="img/bg.jpg" alt="" class="bg" style="height:100%; width:100%;" data-lead-id="background-img" />

But I don't know why it's not working now...

Edit:

Here is my CSS:


* {
margin: 0;
padding: 0;
outline: 0;
}

body, html {
height: 100%;
width: 100%;
}

body {
font-size: 14px;
line-height: 18px;
font-family: 'Open Sans', sans-serif;
color: #aeaeae;
overflow: hidden; /* needed to eliminate scroll bars caused by the background image */
padding: 0;
margin: 0; /* necessary for the raster to fill the screen */
height: 100%;
width: 100%;
}

a {
color: #0252aa;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
}

a img {
border: 0;
}

/* ---------- FUll WIDTH BACKGROUND ---------- */

#bgimg {
position: absolute;
z-index: -1;
}

ENTIRE CODE -

HTML (http://pastebin.com/T66MAuei)

CSS (http://pastebin.com/YhmdDDg6)

AtomicTurban
02-28-2015, 08:41 PM
Delete that line of code and in your CSS add the following



body
{
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


that will make the image full screen and it resize to the size of the browser...

sunfighter
02-28-2015, 11:50 PM
Modern browsers support background-size: cover; No need for the dash stuff. Of course IE is the exception.

edi365
03-01-2015, 08:40 PM
Delete that line of code and in your CSS add the following



body
{
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


that will make the image full screen and it resize to the size of the browser...

It Doesn't show the background at all now...

Here is my CSS:


* {
margin: 0;
padding: 0;
outline: 0;
}

body, html {
height: 100%;
width: 100%;
}

body {
font-size: 14px;
line-height: 18px;
font-family: 'Open Sans', sans-serif;
color: #aeaeae;
overflow: hidden; /* needed to eliminate scroll bars caused by the background image */
padding: 0;
margin: 0; /* necessary for the raster to fill the screen */
height: 100%;
width: 100%;
}

a {
color: #0252aa;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
}

a img {
border: 0;
}

/* ---------- FUll WIDTH BACKGROUND ---------- */

#bgimg {
position: absolute;
z-index: -1;
}

sunfighter
03-02-2015, 12:02 AM
If that didn't work I think we need to see the entire HTML/CSS code please.

edi365
03-02-2015, 03:02 PM
If that didn't work I think we need to see the entire HTML/CSS code please.

HTML (http://pastebin.com/T66MAuei)

CSS (http://pastebin.com/YhmdDDg6)

sunfighter
03-02-2015, 10:59 PM
I used an image that is 700 x 467 Pixels and it covered the screen. What size is img/bg.jpg which you use?
And why didn't you use background-size: cover;? Is that because this is not a background image, but just an image?

edi365
03-03-2015, 08:39 AM
I used an image that is 700 x 467 Pixels and it covered the screen. What size is img/bg.jpg which you use?
And why didn't you use background-size: cover;? Is that because this is not a background image, but just an image?

2509X1673

it workes now and shows the background from the css, But it still won't show 100% of the image, Its showing just the top part of it.

sunfighter
03-03-2015, 02:23 PM
You are having ratio problems. Your screen ratio and the image ratio are not compatible to show the entire image. I say "Take what you can get." Does it look OK? That should be the question. Do you need the missing part?

edi365
03-03-2015, 10:15 PM
You are having ratio problems. Your screen ratio and the image ratio are not compatible to show the entire image. I say "Take what you can get." Does it look OK? That should be the question. Do you need the missing part?

Yes I need the missing part, Its very important.

sunfighter
03-04-2015, 03:17 PM
OK. Please post your HTML code here and put the picture you want as a back ground up on a photo and image hosting site and give us the link to it.

If you have a site on the web, it would be nice if you posted a link.

edi365
03-04-2015, 10:35 PM
OK. Please post your HTML code here and put the picture you want as a back ground up on a photo and image hosting site and give us the link to it.

If you have a site on the web, it would be nice if you posted a link.

Problem solved :)
I did:

background-size: 100% 100%
(Yes, 100% Twice)
And it worked! :)

I appriciate your will to help me :)

sunfighter
03-05-2015, 01:00 PM
Glad it worked for you. It didn't for me.