Need Help Setting A Background Image As Fixed Position

HTML & CSS
1

Hi.

I am working on a project and the CSS is giving me some trouble.

I have a background image that I want to be used as fixed-positon.

The image size is 1004 x 1031.

I used the following code in my CSS:

#wrapper {
	width: 966px;
	margin: 0 auto;
	padding-left: 38px;

	
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0 auto;
	padding: 0px;
	color:#FFFFFF;
    background-image:url(bg.jpg);
	background-position:center top;
	background-attachment:fixed;
	background-color:#000000;
}

BUT… my problem is that it is not displaying all of the iamge in the web page background. It only shows about half of the actual background image size.

If anyone has any insight or can tell me what I am doing wrong, I would greatly appreciate it.

Thanks in advance for the help! :slight_smile:

2

Sorry if this sounds too basic, but would you be able to post the rest of your HTML code? Perhaps just a sample page?

Just a few days ago, I’ve worked on page backgrounds, and while I was building and testing the bare-bones “master” page, not everything was displaying, because I didn’t have enough content to fill out the page.

Sounds silly, I know. If you feel up to it, post a simple example page somewhere, or at least paste your code and attach the background image here, that might help others replicate and troubleshoot the issue.

:wink:

3

Sure :slight_smile: Here is the link of the page I am working on: http://www.thebransonpro.com/justone

And the backgournd image is: http://www.thebransonpro.com/justone/bg.jpg

You can see when you view the image that it is not showing the full image length in the actual webpage background.

Thanks for your advice!

4

Hi,
It is only going to show the portion of the image that fits in the viewport when it is set as fixed. :slight_smile:

You would need a viewport height that is as tall as the image to see it all. And then you might have to set a min-height on the body if the page contents were not as tall as the image.

5

Thanks, Rayzur. I know this might be a stupid question… But can you give me a code example of how to achieve this?

6

Yeah, I’ll give you an example but your viewport must be as tall as the image to see it work. :slight_smile:


body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin:0;
    padding:0;
    color:#FFF;
[COLOR=Blue]    background:#000 url(bg.jpg) no-repeat 50% 0 fixed;
    min-height:1031px; /*same as image height*/[/COLOR]
}

#wrapper {
    width: 966px;
    margin: 0 auto;
    padding-left: 38px;
}
7

Thanks for the code example. But I still don’t understand what I am doing wrong when it comes to setting the viewport height :slight_smile:

I tried making the #wrapper hieght 100% or >1031px… But it’s still not showing me the correct image size.

8

Oops :slight_smile: Sorry for being ignorant! I finally got it. Thanks for your help, guys!