PDA

View Full Version : Fullpage background


Flinth-design
06-26-2011, 12:13 PM
Help needed. I have a background with a picture on it and I want to put it in my website with css.

The background shows in the website but nog how I want it.. I don't want an overflow in my site but it has to show in every monitor, small or big.

This is the css code I have.

html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
float: left;
background-image: url(images/background-met-foto.png);
text-align:left;
}
.wrapper {
width: 100%;
min-height: 100%;
}

The website is: http://www.flinth-design.nl/flinth/index.htm

I have tried it all day but it doesn' work the way I want it.

Thanks in advance

m1a2x3x7
06-26-2011, 02:48 PM
Couple of things.

1. Set background-repeat to no repeat.
2. Set background size to 100% (CSS3 feature)

gentleone
06-28-2011, 01:00 AM
If you don't need to support Internet Explorer then I would go as well for the CSS3 background-size property, but if you have to then you'll have two other options.

1. javascript based:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

or

http://www.buildinternet.com/project/supersized/

2. CSS based something like this:

<body>

<div>

<img scr="images/background.jpg" class="background" alt"" />

</div>

<div id="container">

</div>

</body>


CSS:

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

img.background {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
}

#container {
width: 100%;
height: 100%;
overflow: auto;
}