• Registered: December 23, 2008
  • Posts: 2

Topic: Background issue

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

Last edited by raistlin (December 23, 2008 4:46 am)

Vote up Vote down

  • Registered: December 21, 2008
  • Posts: 599

Re: Background issue

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

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: Background issue

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/backgroundfull … xible.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.

Last edited by Wickham (December 23, 2008 6:12 am)

Vote up Vote down

  • Registered: December 20, 2008
  • Posts: 6

Re: Background issue

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.

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: Background issue

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

Last edited by Wickham (December 23, 2008 11:33 am)

Vote up Vote down

  • Registered: December 23, 2008
  • Posts: 2

Re: Background issue

Aye.. I get it now.. the problem was in the image... eww.... thanks for the help <3


http://lambofgod.webng.com/last_try.html

Last edited by raistlin (December 23, 2008 11:43 am)

Vote up Vote down

  • Registered: December 20, 2008
  • Posts: 6

Re: Background issue

Ok, Thank you i didn't figure out what my problem with CSS was but got around it by using

<body background="images/backround.jpg">

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.

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: Background issue

<body background="images/backround.jpg">

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:-
<body id="background1">..........................</body>
or
<body id="background2">..........................</body>

Last edited by Wickham (December 24, 2008 2:08 am)

Vote up Vote down