raistlin Posted December 23, 2008 Report Share Posted December 23, 2008 (edited) hello, I got an BG issue like it works on one website... but it aint working on the other one here it's, i got this website which is workin fine http://lambofgod.webng.com/index.html like what u can see in this website that the image is resizing it self for to fit to the screen resolution, and there this website who is using the same code but the BG image aint resizing http://lambofgod.webng.com/last_try.html , can u please tell me how can i make the same thing as in the frist website, I mean an self resizing image. im using FF Thanks Edited December 23, 2008 by raistlin Quote Link to comment Share on other sites More sharing options...
DesignBySLS Posted December 23, 2008 Report Share Posted December 23, 2008 It has to do with the width of your image sizes. The one that "works" is a 1600px ? 950px file size. The one that is not working is a 1230px ? 828px file size, and has "sharp" edges to the image. You are not going to get any better than that unless you edit/recreate the image to fade out on the sides. Looking at the images them selves this is purely a design/image/graphics issue. The code is appropriate. http://lambofgod.webng.com/images/bg.jpg vs http://lambofgod.webng.com/bg.png Are these part of a template or from another site? S Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 23, 2008 Report Share Posted December 23, 2008 (edited) Neither page is resizing the image to the viewport resolution; if you make the window smaller, about 1000px wide, and drag it wider and narrower, the image will disappear out to the left and right in both pages. I don't think you can get a background-image to resize. It has a fixed size and you can set options to fix it to the center so that both sides get cut off in a small window, or set it to the left so that only the right side gets cut off. One image is 1600px wide and the other 1230px wide, so you may be seeing some different centralising in different windows, but not resizing. The background-position property is described here:- http://www.w3schools.com/css/pr_background-position.asp If you want the image to resize in any viewport resolution, see this example http://www.wickham43.net/backgroundfullwidthflexible.html drag the window wider and narrower and see that the sides are fixed to the window edges and the width and height adjust according to the window size. The example uses a normal image, not a background-image, which is positioned with position: fixed and other content shows on top because of z-index: -1; and the image stays fixed when scrolling. Edit: since your images have a central section for content, you will have to use a flexible or percentage width for the content so that resizes as well. It could be complicated. IE6 does not operate position: fixed so position: absolute has to be used, so the image scolls up and down with the content in IE6 although it does adjust to the viewport width in the same way. Edited December 23, 2008 by Wickham Quote Link to comment Share on other sites More sharing options...
dragdan Posted December 23, 2008 Report Share Posted December 23, 2008 i tried to set a back round image with, body { background-color: #FFFFFF; background-image: images/backround.jpg; background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; } it worked at first but then I made a change somewhere in the css body and now there is no backround image. the change was not in the image directory so it should be ok but i can't figure out how to get it working again. Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 23, 2008 Report Share Posted December 23, 2008 (edited) Try this:- body { background-color: #FFFFFF; background-image: url(images/backround.jpg); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; } where I've added url(..........) Is the image backround.jpg or background.jpg Edited December 23, 2008 by Wickham Quote Link to comment Share on other sites More sharing options...
raistlin Posted December 23, 2008 Author Report Share Posted December 23, 2008 (edited) Aye.. I get it now.. the problem was in the image... eww.... thanks for the help <3 http://lambofgod.webng.com/last_try.html Edited December 23, 2008 by raistlin Quote Link to comment Share on other sites More sharing options...
dragdan Posted December 23, 2008 Report Share Posted December 23, 2008 Ok, Thank you i didn't figure out what my problem with CSS was but got around it by using which gives me more flexibility using different backgrounds on different pages since i don't yet know ho to create multiple levels for different pages with CSS, or if thats even possible. Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 24, 2008 Report Share Posted December 24, 2008 (edited) If that works, it's not the modern way of coding. i don't yet know ho to create multiple levels for different pages with CSS, or if thats even possible You create an id for each page:- #background1 { background-image: url(images/background1.jpg); } #background2 { background-image: url(images/background2.jpg); } and each page markup has:- ..........................or .......................... Edited December 24, 2008 by Wickham Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.