Jump to content

Background-image covering the whole page

Dibbets

By Dibbets
in CSS

Recommended Posts

Dibbets Newbie

Dibbets

Posted
Posted

My background image must cover the whole page. Is there a way to do that? Also, it has to adjust to the seize of the window. So, it doesn't matter whether they read from a big or small screen. I'm using an external style sheet.This is a great forum, any help will be highly appreciated.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

If it's not going to repeat or stretch, the only option is to create a BIG FREAKING image that is as big as the biggest monitor resolution you know. Man, that's gonna be a sloooow download time. And of course it will be cropped in some way by monitors with a lower resolution. Maybe that's a big deal, maybe not.Are you really sure about what your asking?It is possible to simulate the effect you're describing using multiple images. Like 1 image on one side, another on the other side, 1 in the middle, and then a very small image that repeats a gradient or texture to fill in the gaps. This is actually pretty common.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

to use an image to stretch full height and width, you will need to use a position absolute image and set height of img, body and html to 100% like below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{margin:0; padding: 0;}body, html { height:100%; width:100%; }body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%; color: #fff;}p {margin:1em 0;}h1, h2, h3, h4, h5, h6{margin:0.9em 7px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}div, p {z-index:1; position:relative;}.full_sizeBG {position:absolute; width: 100%; height: 100%; top:0; left:0; z-index:0;} /*using width: 100%; ONLY shows image that is proportionate in width and height, while width:100%; height:100% will stretch to widest and highest available screen or content on page causing a distorted image*/ #wrapper { position:relative; padding-top:1px;} /*padding-top:1px prevent gap along top caused by margin collapse problem*/#inner_wrapper {width:960px;margin: 0 auto;}#tableBG {margin:0 auto; width:800px; position:relative; opacity: 0.5; filter: alpha (opacity=50);}#tableBG table {position:relative; z-index: 99;} /*EDIT */</style></head><body><div id="wrapper"><img class="full_sizeBG" src="../clonewars_body.jpg" /><div id="inner_wrapper">  <p>Whose worth's unknown, although his height be taken. Within his bending sickle's compass come; admit impediments; love is not love which alters when it alteration finds. Or bends with the remover to remove.</p>  <p>That looks on tempests and is never shaken; I never writ, nor no man ever loved. If this be error and upon me proved, let me not to the marriage of true minds love's not time's fool, though rosy lips and cheeks. It is the star to every wand'ring bark, but bears it out even to the edge of doom. Within his bending sickle's compass come; that looks on tempests and is never shaken. Which alters when it alteration finds, love's not time's fool, though rosy lips and cheeks it is the star to every wand'ring bark.</p>  <p>But bears it out even to the edge of doom. Within his bending sickle's compass come; I never writ, nor no man ever loved. That looks on tempests and is never shaken; or bends with the remover to remove.</p>  <p>It is the star to every wand'ring bark, but bears it out even to the edge of doom. Within his bending sickle's compass come; let me not to the marriage of true minds which alters when it alteration finds. Love alters not with his brief hours and weeks. That looks on tempests and is never shaken; which alters when it alteration finds, let me not to the marriage of true minds.</p>  <p>Whose worth's unknown, although his height be taken. Admit impediments; love is not love or bends with the remover to remove. Love alters not with his brief hours and weeks, but bears it out even to the edge of doom. Let me not to the marriage of true minds I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, or bends with the remover to remove. Love's not time's fool, though rosy lips and cheeks that looks on tempests and is never shaken. Let me not to the marriage of true minds oh, no, it is an ever fixed mark that looks on tempests and is never shaken. Whose worth's unknown, although his height be taken.</p>  <p>But bears it out even to the edge of doom. Admit impediments; love is not love love's not time's fool, though rosy lips and cheeks if this be error and upon me proved. Let me not to the marriage of true minds or bends with the remover to remove. Whose worth's unknown, although his height be taken.</p>  <p>But bears it out even to the edge of doom. Love alters not with his brief hours and weeks, I never writ, nor no man ever loved. That looks on tempests and is never shaken; or bends with the remover to remove.</p>  <p>Oh, no, it is an ever fixed mark it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. Let me not to the marriage of true minds I never writ, nor no man ever loved. Within his bending sickle's compass come; or bends with the remover to remove. Love alters not with his brief hours and weeks, which alters when it alteration finds, oh, no, it is an ever fixed mark. Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Let me not to the marriage of true minds love's not time's fool, though rosy lips and cheeks oh, no, it is an ever fixed mark. I never writ, nor no man ever loved.</p>  <p>But bears it out even to the edge of doom. It is the star to every wand'ring bark, let me not to the marriage of true minds which alters when it alteration finds. That looks on tempests and is never shaken; whose worth's unknown, although his height be taken. If this be error and upon me proved, within his bending sickle's compass come. Let me not to the marriage of true minds which alters when it alteration finds, or bends with the remover to remove.</p>  <p>But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark admit impediments; love is not love within his bending sickle's compass come. That looks on tempests and is never shaken; or bends with the remover to remove. I never writ, nor no man ever loved. But bears it out even to the edge of doom.</p>  <p>Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come. Which alters when it alteration finds, it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom. Or bends with the remover to remove. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; love alters not with his brief hours and weeks. But bears it out even to the edge of doom. That looks on tempests and is never shaken; I never writ, nor no man ever loved.</p>  <p>Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds which alters when it alteration finds. Admit impediments; love is not love oh, no, it is an ever fixed mark within his bending sickle's compass come. I never writ, nor no man ever loved. Whose worth's unknown, although his height be taken. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>  <p>Love's not time's fool, though rosy lips and cheeks but bears it out even to the edge of doom. It is the star to every wand'ring bark, which alters when it alteration finds, oh, no, it is an ever fixed mark. Let me not to the marriage of true minds that looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom.</p>  <p>Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come. Which alters when it alteration finds, it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom. Or bends with the remover to remove. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; love alters not with his brief hours and weeks. But bears it out even to the edge of doom. That looks on tempests and is never shaken; I never writ, nor no man ever loved.</p>  <p>Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds which alters when it alteration finds. Admit impediments; love is not love oh, no, it is an ever fixed mark within his bending sickle's compass come. I never writ, nor no man ever loved. Whose worth's unknown, although his height be taken. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>  <p>Love's not time's fool, though rosy lips and cheeks but bears it out even to the edge of doom. It is the star to every wand'ring bark, which alters when it alteration finds, oh, no, it is an ever fixed mark. Let me not to the marriage of true minds that looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom.</p>  <p>Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come. Which alters when it alteration finds, it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom. Or bends with the remover to remove. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; love alters not with his brief hours and weeks. But bears it out even to the edge of doom. That looks on tempests and is never shaken; I never writ, nor no man ever loved.</p>  <p>Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds which alters when it alteration finds. Admit impediments; love is not love oh, no, it is an ever fixed mark within his bending sickle's compass come. I never writ, nor no man ever loved. Whose worth's unknown, although his height be taken. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>  <p>Love's not time's fool, though rosy lips and cheeks but bears it out even to the edge of doom. It is the star to every wand'ring bark, which alters when it alteration finds, oh, no, it is an ever fixed mark. Let me not to the marriage of true minds that looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom.</p></div><div id="tableBG"><img class="full_sizeBG" src="../clonewars_body.jpg" /><table width="800" border="1" height="600px">  <tr>	<td> </td>	<td> </td>  </tr>  <tr>	<td> </td>	<td> </td>  </tr></table></div></div></body></html>

Link to comment
Share on other sites
Dibbets Newbie

Dibbets

Posted
  • Author
Posted
If it's not going to repeat or stretch, the only option is to create a BIG FREAKING image that is as big as the biggest monitor resolution you know. Man, that's gonna be a sloooow download time. And of course it will be cropped in some way by monitors with a lower resolution. Maybe that's a big deal, maybe not.Are you really sure about what your asking?It is possible to simulate the effect you're describing using multiple images. Like 1 image on one side, another on the other side, 1 in the middle, and then a very small image that repeats a gradient or texture to fill in the gaps. This is actually pretty common.
Wow, sounds tough! How do you do that, dividing it by three? Do you have an example? I must admit, I'm a rookie, and a bit daunted by this.
Link to comment
Share on other sites
Dibbets Newbie

Dibbets

Posted
  • Author
Posted
Hi,looking to solve my own problem about give opacity to a background image i found following post:Perfect Full Page Background Image, hooping that this could help.Cheers
Hiya,Thanks a million for the tip. Two things though. 1) The image does cover the whole page, only it's doing so for half the picture. 2) I cannot get the text on it. How did you manage? This is the code I got so far:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="familie.css" /><title>A Day in The Life</title></head><body><div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="Homer.jpg" alt="Image of Homer Simpson drinking beer"/> </td> </tr> </table><div id="cont"> <div class="box"> <!-- content in here --> </div></div> </body></html>And the CSS:* { margin: 0; padding: 0;}html, body, #bg, #bg table, #bg td { height:100%; width:100%; overflow:hidden;}#bg { position: fixed;}#bg div { height:200%; left:-50%; position:absolute; top:-50%; width:200%;}#bg td { text-align:center; vertical-align:middle;}#bg img { margin:0 auto; min-height:50%; min-width:50%;}#cont { position:absolute; top:0;left:0; z-index:70; overflow:auto;}.box { margin: 0 auto; width: 400px; padding: 50px; background: white; padding-bottom:100px; font: 14px/2.2 Georgia, Serif;}
Link to comment
Share on other sites
Dibbets Newbie

Dibbets

Posted
  • Author
Posted

Wow, that's loads of code. I'll try this later. Thank you so much!

to use an image to stretch full height and width, you will need to use a position absolute image and set height of img, body and html to 100% like below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{margin:0; padding: 0;}body, html { height:100%; width:100%; }body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%; color: #fff;}p {margin:1em 0;}h1, h2, h3, h4, h5, h6{margin:0.9em 7px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}div, p {z-index:1; position:relative;}.full_sizeBG {position:absolute; width: 100%; height: 100%; top:0; left:0; z-index:0;} /*using width: 100%; ONLY shows image that is proportionate in width and height, while width:100%; height:100% will stretch to widest and highest available screen or content on page causing a distorted image*/ #wrapper { position:relative; padding-top:1px;} /*padding-top:1px prevent gap along top caused by margin collapse problem*/#inner_wrapper {width:960px;margin: 0 auto;}#tableBG {margin:0 auto; width:800px; position:relative; opacity: 0.5; filter: alpha (opacity=50);}#tableBG table {position:relative; z-index: 99;} /*EDIT */</style></head><body><div id="wrapper"><img class="full_sizeBG" src="../clonewars_body.jpg" /><div id="inner_wrapper">  <p>Whose worth's unknown, although his height be taken. Within his bending sickle's compass come; admit impediments; love is not love which alters when it alteration finds. Or bends with the remover to remove.</p>  <p>That looks on tempests and is never shaken; I never writ, nor no man ever loved. If this be error and upon me proved, let me not to the marriage of true minds love's not time's fool, though rosy lips and cheeks. It is the star to every wand'ring bark, but bears it out even to the edge of doom. Within his bending sickle's compass come; that looks on tempests and is never shaken. Which alters when it alteration finds, love's not time's fool, though rosy lips and cheeks it is the star to every wand'ring bark.</p>  <p>But bears it out even to the edge of doom. Within his bending sickle's compass come; I never writ, nor no man ever loved. That looks on tempests and is never shaken; or bends with the remover to remove.</p>  <p>It is the star to every wand'ring bark, but bears it out even to the edge of doom. Within his bending sickle's compass come; let me not to the marriage of true minds which alters when it alteration finds. Love alters not with his brief hours and weeks. That looks on tempests and is never shaken; which alters when it alteration finds, let me not to the marriage of true minds.</p>  <p>Whose worth's unknown, although his height be taken. Admit impediments; love is not love or bends with the remover to remove. Love alters not with his brief hours and weeks, but bears it out even to the edge of doom. Let me not to the marriage of true minds I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, or bends with the remover to remove. Love's not time's fool, though rosy lips and cheeks that looks on tempests and is never shaken. Let me not to the marriage of true minds oh, no, it is an ever fixed mark that looks on tempests and is never shaken. Whose worth's unknown, although his height be taken.</p>  <p>But bears it out even to the edge of doom. Admit impediments; love is not love love's not time's fool, though rosy lips and cheeks if this be error and upon me proved. Let me not to the marriage of true minds or bends with the remover to remove. Whose worth's unknown, although his height be taken.</p>  <p>But bears it out even to the edge of doom. Love alters not with his brief hours and weeks, I never writ, nor no man ever loved. That looks on tempests and is never shaken; or bends with the remover to remove.</p>  <p>Oh, no, it is an ever fixed mark it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. Let me not to the marriage of true minds I never writ, nor no man ever loved. Within his bending sickle's compass come; or bends with the remover to remove. Love alters not with his brief hours and weeks, which alters when it alteration finds, oh, no, it is an ever fixed mark. Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Let me not to the marriage of true minds love's not time's fool, though rosy lips and cheeks oh, no, it is an ever fixed mark. I never writ, nor no man ever loved.</p>  <p>But bears it out even to the edge of doom. It is the star to every wand'ring bark, let me not to the marriage of true minds which alters when it alteration finds. That looks on tempests and is never shaken; whose worth's unknown, although his height be taken. If this be error and upon me proved, within his bending sickle's compass come. Let me not to the marriage of true minds which alters when it alteration finds, or bends with the remover to remove.</p>  <p>But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark admit impediments; love is not love within his bending sickle's compass come. That looks on tempests and is never shaken; or bends with the remover to remove. I never writ, nor no man ever loved. But bears it out even to the edge of doom.</p>  <p>Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come. Which alters when it alteration finds, it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom. Or bends with the remover to remove. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; love alters not with his brief hours and weeks. But bears it out even to the edge of doom. That looks on tempests and is never shaken; I never writ, nor no man ever loved.</p>  <p>Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds which alters when it alteration finds. Admit impediments; love is not love oh, no, it is an ever fixed mark within his bending sickle's compass come. I never writ, nor no man ever loved. Whose worth's unknown, although his height be taken. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>  <p>Love's not time's fool, though rosy lips and cheeks but bears it out even to the edge of doom. It is the star to every wand'ring bark, which alters when it alteration finds, oh, no, it is an ever fixed mark. Let me not to the marriage of true minds that looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom.</p>  <p>Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come. Which alters when it alteration finds, it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom. Or bends with the remover to remove. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; love alters not with his brief hours and weeks. But bears it out even to the edge of doom. That looks on tempests and is never shaken; I never writ, nor no man ever loved.</p>  <p>Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds which alters when it alteration finds. Admit impediments; love is not love oh, no, it is an ever fixed mark within his bending sickle's compass come. I never writ, nor no man ever loved. Whose worth's unknown, although his height be taken. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>  <p>Love's not time's fool, though rosy lips and cheeks but bears it out even to the edge of doom. It is the star to every wand'ring bark, which alters when it alteration finds, oh, no, it is an ever fixed mark. Let me not to the marriage of true minds that looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom.</p>  <p>Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come. Which alters when it alteration finds, it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom. Or bends with the remover to remove. Within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.</p>  <p>Which alters when it alteration finds, whose worth's unknown, although his height be taken. Love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark or bends with the remover to remove. Let me not to the marriage of true minds within his bending sickle's compass come; love alters not with his brief hours and weeks. But bears it out even to the edge of doom. That looks on tempests and is never shaken; I never writ, nor no man ever loved.</p>  <p>Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds which alters when it alteration finds. Admit impediments; love is not love oh, no, it is an ever fixed mark within his bending sickle's compass come. I never writ, nor no man ever loved. Whose worth's unknown, although his height be taken. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>  <p>Love's not time's fool, though rosy lips and cheeks but bears it out even to the edge of doom. It is the star to every wand'ring bark, which alters when it alteration finds, oh, no, it is an ever fixed mark. Let me not to the marriage of true minds that looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks. But bears it out even to the edge of doom.</p></div><div id="tableBG"><img class="full_sizeBG" src="../clonewars_body.jpg" /><table width="800" border="1" height="600px">  <tr>	<td> </td>	<td> </td>  </tr>  <tr>	<td> </td>	<td> </td>  </tr></table></div></div></body></html>

Link to comment
Share on other sites
  • 2 weeks later...
Abby Newbie

Abby

Posted
Posted

I'll just add a link to this page of my website. It's pure CSS and HTML, and view source might help you out. I use a background image fitted to the whole browser window, and there is also a container with some opacity on it.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...