Jump to content
Stef's Coding Community
Sign in to follow this  
raistlin

Background issue

Recommended Posts

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 by raistlin

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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 by Wickham

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.
Note: Your post will require moderator approval before it will be visible.

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...
Sign in to follow this  

×
×
  • Create New...