Jump to content
Dibbets

Background-image covering the whole page

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Explain a lil bit. You can use body { background: url(image/location/picture.jpg) }Where you want it.. Post some code.

Share this post


Link to post
Share on other sites

Do you want the image to repeat, or to stretch when it needs to? FWIW, stretching usually looks terrible.

Share this post


Link to post
Share on other sites

I don't know if it's possible, but I don't wanna strecht it and I don't wanna repeat it.This is the code: p{font-family:Verdana, Geneva, sans-serif;}body {background-image:url('Homer.jpg');background-repeat:no-repeat;}

Share this post


Link to post
Share on other sites

I think it could maybe but it will be at size which is original. Stretch == resize

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
body {  background: url(/image/location/picture.jpg) no-repeat;  margin: 0px;}

Edited by Haris S

Share this post


Link to post
Share on other sites

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>

Edited by dsonesuk

Share this post


Link to post
Share on other sites
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. Edited by Jer

Share this post


Link to post
Share on other sites
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;}

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...