Wed, 2008-11-05 23:00
Hi csscreator fellas,
My question is : Lets say i have a background image 1800x1800px. How can i make it to fit my resolution 1200x800(or whatever till its less than 1800x1800px). With height and width:100% ? After that i want when i am writing some text and the page gets larger than my screen when i scroll down to be able to see the missing 1000px height from my background image and not just some black color as background. I hope you did understand what am i trying to say.
Thu, 2008-11-06 04:22
#1
Um try setting the
Um try setting the background image to 100%.
And as for the empty space at the bottom add repeat-y to it so it should be similar to this:
#container { background: url(yourimage.jpg) repeat-y 100%; }
Try it and see if that gets your desired results. If not get back to me.
Thu, 2008-11-06 04:39
#2
so.. when i apply your code
so.. when i apply your code there is scroll without having a text.. just scroll down.. when i still set height:100% and width:100% with your code.. doesn't work
Thu, 2008-11-06 04:45
#3
Ok I can't really do anymore
Ok I can't really do anymore without either seeing your HTML & CSS or Seing a live site.
I'm going to be on for the next few hours so if you have no dedications. Although I am going for a cigarete so my cookie might expire. But I will be back if you can get me either of those two things then I can start.
Thu, 2008-11-06 04:49
#4
background
so the site is http://gergov.eu/jesi
the html code is
the css code is
#container {
background: url(img.png) repeat-y 100%;
width:100%;
height:100%;
}
body {
padding:0;
margin:0;
}
Thu, 2008-11-06 04:56
#5
Ok I will fix it now. Is it
Ok I will fix it now.
Is it just the black space you are trying to fix now?
Thu, 2008-11-06 04:58
#6
Also you have ALOT of errors
Also you have ALOT of errors in your html I haven't check your CSS yet but you might want to clear those up first if you are unsure on how to find the results click on the "Validat your documents" in my signature and put in the site uri.
Thu, 2008-11-06 05:05
#7
background
yeah my code is a mess.. but
it gives me 43 errors and half of them is from code that my flash publishing is generating ..
Thu, 2008-11-06 05:06
#8
Ok you actualy have 48
Ok you actualy have 48 errors.
I think the main problem is your doctype chnage it for this:
<!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" />
Thu, 2008-11-06 05:15
#9
Ok I have managed to get it
Ok I have managed to get it to work localy try changing all your code for this BUT make sure you back up ALL of your code.
HTML:
<!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" /> <link rel="stylesheet" type="text/css" href="link.css" /> <title>Kalo</title> </head> <body bgcolor="#000000"> <img id="container" src="img.png"> <div id="two"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="130" id="Untitled-3" align="middle"> <param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" /> <param name="movie" value="logoto.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="logoto.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="800" height="400" name="Untitled-3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object></div> <a href="http://gergov.eu/jesi/index.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="one" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-3" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="button.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!--url's used in the movie--> <a href="http://gergov.eu/jesi/gallery.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="two" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-5" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="button1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button1.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!--url's used in the movie--> <a href="http://gergov.eu/jesi/aboutus.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="tree" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100" height="30" id="Untitled-6" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="button3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button3.swf" quality="high" wmode="transparent" bgcolor="#000000" width="100" height="30" name="button3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!--url's used in the movie--> <a href="http://gergov.eu/jesi/contacts.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="four" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="145" height="30" id="Button2" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="Button2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="Button2.swf" quality="high" wmode="transparent" bgcolor="#000000" width="145" height="30" name="Untitled-7" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <div id="text"><h1 id="h1">Вече и в България!</h1></div> <div id="text1"><p><img class="seven" src="http://gergov.eu/jesi/lunaflexorg.jpg" align ="left" width="48" height="48" />За първи път в България можете да купите водно легло, каквото сте виждали само по филмите. Фирма "Крафт" ЕООД отвори врати на изложбена зала, където се предлагат по каталог водни легла, произжедени в Германия. </p>Да се спи на воден матрак е едновремено здравословно и приятно. Особено добре влияе на хора с гръбначни проблеми - дископатии, дискови хернии. Намалят хъркането. За страдащите от ревматизъм и артрит, водният матрак е благословия, защото вграден нагревател топли водата до 26-36 градуса. С такова легло се пести ток и може да се спи в неотоплена стая. <p> Годишно в Германия се произвеждат по 40хил. такива легла. Използват се не само в домовете, но и в болници, санаториуми, спа-центрове. <p>adsfsfa</p> <p>asffsa</p> <p>adfas</p> </div> </body> </html>
CSS:
@charset "utf-8"; /* CSS Document */ #container { background: url(img.png) repeat-y 100%; width:100%; height:100em; } body { padding:0; margin:0; } a:link { color:#000; text-decoration : underline; } a:visited { color:#000; text-decoration: underline; } a:hover { color:#000; text-decoration: none; } object.one { position:absolute; left:24em; top:100px; } object.two{ position:absolute; left:37.2em; top:100px; } object.tree { position:absolute; left:31.2em; top:100px; } object.four { position:absolute; left:44.5em; top:100px; } img.seven { width:300; height:180; } #gallery { position:absolute; bottom:20px; left:0em; } #gallery1 { position:absolute; bottom:20px; right:0em; } #text { position:absolute; top: 140px; left:3em; color:red; font-size:150%; } #two { position:absolute; top:10px; left:22.5em; width:310; height:74; } #text1 { position:absolute; top:250px; left:5em; color:#cccccc; font-size:130%; } #visit { position:absolute; top:175px; left:5em; } #asdf { position:absolute; top:80px; left:2em; color:#ffffff; font-size:130%; } #asdff { position:absolute; top:110px; left:2em; color:white; font-size:130%; } #emailform { position:absolute; top:150px; right:5em; }
Tell me how it goes.
Thu, 2008-11-06 05:23
#10
background
http://gergov.eu/jesi/hola.html
i made a new one.. the text is ??? but ill fix that later.. see how there is scroll without having text
do you have skype or icq or something ??!! 
it will be easier
Thu, 2008-11-06 05:26
#11
Ok now this should fix
Ok now this should fix it.
HTML:
<!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" /> <link rel="stylesheet" type="text/css" href="link.css" /> <title>Kalo</title> </head> <body bgcolor="#000000"> <img id="container" src="img.png"> <div id="two"<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="130" id="Untitled-3" align="middle"> <param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" /> <param name="movie" value="logoto.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="logoto.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="800" height="400" name="Untitled-3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object></div> <a href="http://gergov.eu/jesi/index.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="one" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-3" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="button.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!--url's used in the movie--> <a href="http://gergov.eu/jesi/gallery.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="two" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="30" id="Untitled-5" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="button1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button1.swf" quality="high" wmode="transparent" bgcolor="#000000" width="120" height="30" name="button2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!--url's used in the movie--> <a href="http://gergov.eu/jesi/aboutus.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="tree" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100" height="30" id="Untitled-6" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="button3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="button3.swf" quality="high" wmode="transparent" bgcolor="#000000" width="100" height="30" name="button3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!--url's used in the movie--> <a href="http://gergov.eu/jesi/contacts.html"></a> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object class="four" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="145" height="30" id="Button2" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent"> <param name="movie" value="Button2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="Button2.swf" quality="high" wmode="transparent" bgcolor="#000000" width="145" height="30" name="Untitled-7" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <div id="text"><h1 id="h1">Вече и в България!</h1></div> <div id="text1"><p><img class="seven" src="http://gergov.eu/jesi/lunaflexorg.jpg" align ="left" width="48" height="48" />За първи път в България можете да купите водно легло, каквото сте виждали само по филмите. Фирма "Крафт" ЕООД отвори врати на изложбена зала, където се предлагат по каталог водни легла, произжедени в Германия. </p>Да се спи на воден матрак е едновремено здравословно и приятно. Особено добре влияе на хора с гръбначни проблеми - дископатии, дискови хернии. Намалят хъркането. За страдащите от ревматизъм и артрит, водният матрак е благословия, защото вграден нагревател топли водата до 26-36 градуса. С такова легло се пести ток и може да се спи в неотоплена стая. <p> Годишно в Германия се произвеждат по 40хил. такива легла. Използват се не само в домовете, но и в болници, санаториуми, спа-центрове. <p>adsfsfa</p> <p>asffsa</p> <p>adfas</p> </div> </body> </html>
CSS:
@charset "utf-8"; /* CSS Document */ #container { background: url(img.png) repeat-y 100%; width:100%; max-width: 100%; overflow: hidden; height: 100%; } body { padding:0; margin:0; } a:link { color:#000; text-decoration : underline; } a:visited { color:#000; text-decoration: underline; } a:hover { color:#000; text-decoration: none; } object.one { position:absolute; left:24em; top:100px; } object.two{ position:absolute; left:37.2em; top:100px; } object.tree { position:absolute; left:31.2em; top:100px; } object.four { position:absolute; left:44.5em; top:100px; } img.seven { width:300; height:180; } #gallery { position:absolute; bottom:20px; left:0em; } #gallery1 { position:absolute; bottom:20px; right:0em; } #text { position:absolute; top: 140px; left:3em; color:red; font-size:150%; } #two { position:absolute; top:10px; left:22.5em; width:310; height:74; } #text1 { position:absolute; top:250px; left:5em; color:#cccccc; font-size:130%; } #visit { position:absolute; top:175px; left:5em; } #asdf { position:absolute; top:80px; left:2em; color:#ffffff; font-size:130%; } #asdff { position:absolute; top:110px; left:2em; color:white; font-size:130%; } #emailform { position:absolute; top:150px; right:5em; }
Thu, 2008-11-06 05:29
#12
background
mmmmm i think its the same?
Thu, 2008-11-06 05:32
#13
Ok no I have actualy fixed
Ok no I have actualy fixed it now.
CSS:
#container { background: url(img.png) repeat-y 100%; overflow: hidden; max-width: 100%; width:100%; height:100%; } body { padding:0; margin:0; width: 100%; overflow: hidden; } a:link { color:#000; text-decoration : underline; } a:visited { color:#000; text-decoration: underline; } a:hover { color:#000; text-decoration: none; } object.one { position:absolute; left:24em; top:100px; } object.two{ position:absolute; left:37.2em; top:100px; } object.tree { position:absolute; left:31.2em; top:100px; } object.four { position:absolute; left:44.5em; top:100px; } img.seven { width:300; height:180; } #gallery { position:absolute; bottom:20px; left:0em; } #gallery1 { position:absolute; bottom:20px; right:0em; } #text { position:absolute; top: 140px; left:3em; color:red; font-size:150%; } #two { position:absolute; top:10px; left:22.5em; width:310; height:74; } #text1 { position:absolute; top:250px; left:5em; color:#cccccc; font-size:130%; } #visit { position:absolute; top:175px; left:5em; } #asdf { position:absolute; top:80px; left:2em; color:#ffffff; font-size:130%; } #asdff { position:absolute; top:110px; left:2em; color:white; font-size:130%; } #emailform { position:absolute; top:150px; right:5em; }
Thu, 2008-11-06 05:35
#14
background
no 
its still the same still having scroll without need
Thu, 2008-11-06 05:39
#15
Have you added the latest
Have you added the latest css?
This has to work because the body Is set to 100% and the overflow is hidden so that black space to the right has gone. I've tried this code with a live editor on your website.
Thu, 2008-11-06 05:42
#16
yeah i did apply the new css
yeah i did apply the new css code http://gergov.eu/jesi/links.css
i dont know why it doesnt work when i open it.. still have a scroll
Thu, 2008-11-06 05:44
#17
The reason why you have the
The reason why you have the scroll is because your div "two" is wrong it needs to be
<div id="two"<object>
That is also why your text isn't displaying.
Thu, 2008-11-06 05:47
#18
yeah but look now when i
yeah but look now when i add more text.. the background doesn't stretch its black background
Thu, 2008-11-06 05:51
#19
Oh thats were we're going
Oh thats were we're going wrong we're looking at different documents. Ok ill try this one 
Thu, 2008-11-06 06:03
#20
OOOOOOOOOOOOOOOOh my
OOOOOOOOOOOOOOOOh my god!!!!!!!!!!
I only just realised that container isn't a div!
That is were we are going wrong!
Ok put back your original documents.
Thu, 2008-11-06 06:04
#21
http://gergov.eu/jesi/index.h
Thu, 2008-11-06 06:16
#22
Ok you need to add to the
Ok you need to add to the #two css block.
#two { left:22.5em; position:absolute; top:10px; width: 500px; overflow:hidden; }
Thu, 2008-11-06 06:27
#23
damn still with ff scroll
damn still with ff scroll without text.. and with ff ie google chrome.. when i write some text.. have scroll but blackbackground
dude thanks for the help im going to sleep now coz im.. almost dead see ya in 5-10 hours if not.. se ya tonight thanks again for the help and we will make this later
Thu, 2008-11-06 06:30
#24
Ok the rest is because of
Ok the rest is because of errors and bad doctype copy the doctype in again, then edit your img tag for the container change it to:
<img id="container" src="img.png" />
To fit in with xhtml1.0 restrictions. This should then fix your background issue for most of the broswers. Also you can take the background line out of your #container CSS block.
I'm using FF4 and I'm not seeing the scroll.
All the browsers are going to have the funnies because you have so many errors a record breaking amount of errors I think 
.
Thu, 2008-11-06 06:57
#25
Well I guess you have given
Well I guess you have given up but if you want to check that it does work go to this link
Thu, 2008-11-06 15:41
#26
i guess its not from my
i guess its not from my mistakes coz with your version where i have " />" at the end .. and everything looks clean.. stil i have scroll without having a large text
Fri, 2008-11-07 06:47
#27
I was requested to look at
I was requested to look at this problem, but will gloss over the previous replies for the moment as there is rather a lot to absorb, instead simply looking at the site, makes me question why the image is being set as an inline one? The normal approach to what I see there would be this:
The image is set as a background of html the graphic would be sliced into a thin ~2-3px wide strip but the full height this is set in the shorthand background property to repeat across the page on the x-axis, this takes care of any viewport width. Where the image runs out in terms of height and you are left with tha background from the parent you state a solid background color that matches the last pixel in your image e.g in this case #666 that solid color then takes over from the graphic and fills in the bottom area after the graphic has ended.
{background: #666 url(image.png) repeat-x }
Really not sure whether this is at all what you were trying to achieve?
Fri, 2008-11-07 07:07
#28
Hi Hugo, Thanks for the
Hi Hugo,
Thanks for the response. Actually i did this code :
css:
#cont {
background:url(img.png) repeat-x #e1e1e1;
width:100%;
}
===================================================================
html:
whole body
the problem is that css doesn't like png ? Because the background goes white like there is no img for background.
Fri, 2008-11-07 07:23
#29
CSS loves png's, html loves
CSS loves png's, html loves png's. the png format is overall wonderful and purpose designed for the web. can i ask what browser you are using?
Fri, 2008-11-07 07:25
#30
browser
IE, FireFox, Google Chrome
Fri, 2008-11-07 07:30
#31
Can you add that code so
Can you add that code so that we may see the problem? Is the approach I outlined one that would meet requirements?
Fri, 2008-11-07 07:31
#32
i didnt understand .. which
i didnt understand .. which code? where to add it ?
Fri, 2008-11-07 07:55
#33
socialevil wrote:Hi
Hi Hugo,
Thanks for the response. Actually i did this code :
css:
#cont {
background:url(img.png) repeat-x #e1e1e1;
width:100%;
}
===================================================================
html:
whole body
the problem is that css doesn't like png ? Because the background goes white like there is no img for background.
That idea but place the background on the html element.
Fri, 2008-11-07 08:24
#34
yeah but see how it looks
yeah but see how it looks now the width is not 100% and there is some visible line.. and for the width and for the height
http://gergov.eu/jesi/index.html
im a little bit confused in this code what is in external css what is internal.. and so on
Fri, 2008-11-07 09:14
#35
If you change: #conn
If you change:
#conn { background:#666 url(img.png) repeat-x; }
To:
html { background:#666 url(img.png) repeat-x; }
Does that not suit requirements?
The horizontal line will almost certainly be the fact that you have not cropped the graphic correctly, you have left a 1px space at the bottom of the png.
body {width:100%;} shouldn't be necessary
Fri, 2008-11-07 09:35
#36
well im doing this with
well im doing this with flash.. my stage is 1800x1800 and i do the height and width of the image to 1800x1800 no pixels left
Fri, 2008-11-07 12:43
#37
Maybe I don't understand
Maybe I don't understand what you want, but I certainly wouldn't make such a large image. Using your current bg image, I did this:
body { background: #666 url(img.png) top repeat-x; color: white; font-size: 100%; }
cheers,
gary
Fri, 2008-11-07 17:42
#38
Yes that did work i just
Yes that did work i just made some changes on the image and now works fine Thank you guys