...

View Full Version : CSS Background Image Help Please!



Sequlas
06-03-2007, 07:54 PM
Hey,

I'm trying to get the image on my background to expand to 100% to the user's screen resolution, such as if a 1024x768 user was to open the page, the picture being 1240x930.
So basically shrinking it in that scenario.

but I can't seem to figure out how. help please?

thanks!
(the "Background coding", on the 3-6 lines here. Ignore the rest really).

<STYLE type='text/css'>table, tr, td {border-style:none; background-color:transparent;} table table, table table tr, table table td {background-color:transparent;} body {background-color:rgb(16,73,111); background-image:URL('http://rastarocket06.googlepages.com/surf_billabong.jpg/surf_billabong-full.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center top;} table table table {border:1px none; border-color:rgb(0,0,0); padding:1px;} table table table td {background-color:blue; filter:alpha(opacity=70); opacity:0.9; -khtml-opacity:0.9;} table table table table, div table table table, A IMG {border-style:none; border-width:1px;} body table, body td, body li, body p, body div, body table table table td, .text, .blacktext10 {font-family:arial; font-weight:normal; text-decoration:none; font-style:normal; color:rgb(255,255,255); font-size:11px;} a, a:link, a:active, a:visited, a.text:link, a.text:active, a.text:visited, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.redlink:link, a.redlink:active, a.redlink:visited {font-family:arial; font-weight:bold; text-decoration:underline; font-style:normal; color:rgb(255,255,255); font-size:11px;} a:hover, a.text:hover, a.searchlinksmall:hover, a.redlink:hover {font-family:arial; font-weight:bold; text-decoration:underline; font-style:normal; color:rgb(255,255,255); font-size:11px;} .nametext {font-family:arial; font-weight:bold; text-decoration:none; font-style:normal; color:rgb(255,255,255); font-size:16px;} .btext, a.redlink:link, a.redlink:active, a.redlink:visited {color:rgb(255,255,255);} .lightbluetext8 {font-family:arial; font-weight:bold; text-decoration:none; font-style:normal; color:rgb(255,255,255);} .orangetext15, .whitetext12 {font-family:arial; font-weight:bold; text-decoration:none; font-style:normal; color:rgb(255,255,255); font-size:12px;} .navbar, .navbar:link, .navbar:visited, .navbar:active {font-family:verdana!important; font-weight:normal!important; text-decoration:none!important; font-style:normal!important; color:rgb(255,255,255)!important; font-size:11px!important;} .navbar:hover {font-family:verdana!important; font-weight:normal!important; text-decoration:none!important; font-style:normal!important; color:rgb(255,255,255)!important; font-size:11px!important;} .contacttable {background:url('http://i91.photobucket.com/albums/k286/pulselayouts/contact/billabong_ct.gif'); width:300px!important; height:150px!important; padding:0px!important;} .contacttable table, table.contacttable td {padding:0px !important; border:0px none; background-color:transparent; background-image:url('none');} .contacttable a img {visibility:hidden; border:0px!important;} .contacttable a {display:block; height:28px; width:115px;} .contacttable .text {font-size:1px!important;} .contacttable .text, .contacttable a, .contacttable img {filter:none!important;} body table td.text span.blacktext12 {display:block; font-size:1px; letter-spacing:-0.5pt; margin-top:-5px; font-weight:normal; width:435px; height:75px; background-image:URL(http://i91.photobucket.com/albums/k286/pulselayouts/extended/billabong_en.gif); background-position:top left; width:435px; height:150px;} body {scrollbar-arrow-color:rgb(16,73,111); scrollbar-track-color:rgb(16,73,111); scrollbar-highlight-color:rgb(5,112,175); scrollbar-shadow-color:rgb(5,112,175); scrollbar-face-color:rgb(5,112,175); scrollbar-dark-shadow-color:rgb(5,112,175); scrollbar-3dlight-color:rgb(5,112,175);} </STYLE>

_Aerospace_Eng_
06-03-2007, 07:57 PM
Its possible but its not going to be easy on myspace. This page shows how to do it
http://www.cssplay.co.uk/layouts/background.html

Also please use
your code here tags.

Sequlas
06-03-2007, 08:05 PM
oh yeah. sorry about the code tags.

Yeah, I'm starting to think it's impossible... hmmm

_Aerospace_Eng_
06-03-2007, 08:50 PM
I can only get it to work in Firefox. I think the best you are going to be able to do is this

<style type="text/css">
* {
background:none;
}
html, body {
background:black url(http://rastarocket06.googlepages.com/surf_billabong.jpg/surf_billabong-full.jpg) no-repeat center fixed;
}
</style>

The background will center on larger resolustions and the parts that the image doesn't cover will be black.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum