Background img

Hi i have an image to use for my pages background, the page width will be 80% of the view-port.
my bg image is 200px x 200px. what properties am i to use to have it span the page without me seeing borders or should i say the end and begining of the image. i have see so many boxes in my page, indicating the end and start

For a background image that fills the screen/container at any size, without showing any border, I use css like this:-

    background-color: #666; /* a default colour, if the image fails to load */
    background-image: url(../images/background.jpg);
    background-attachment: fixed ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

The problem I foresee is that the image may not have sufficient resolution to cover 80% of a screen. Certainly on anything bigger than a mobile phone.
This will result in the image being “blown-up” so it won’t look crisp on a large screen. You will probably need to get a higher resolution image for this.

It’s not clear from that whether you want a single image to fill the page, as in @SamA74’s example, or whether you want the image to keep repeating across the page.

You might find it helpful to read about the various background options:
http://reference.sitepoint.com/css/colorsbackgrounds

I took it as filling the page.
If you are tiling the image, the resolution should not be an issue. You will only need the first two lines above.

Yes i am using a single image that will have to tile to fill the background:
now i have this set up. so its working.
body {
background-color: hsla(120,100%,10%,1);
background-image: url(bg.jpg);
background-attachment: fixed ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;

}

If you are tiling the image, you do not want these two lines

background-repeat: no-repeat;
background-size: cover;

These lines are optional, depending on what you want:

background-attachment: fixed ; /* will stop the image scrolling */
background-position: center;

The only line you really need in that case is:

background-image: url(bg.jpg);

Though the first line with the colour, is a fallback in case the image does not load, or if the image has an alpha channel and needs a background colour.

1 Like

wow! i jus removed the two lines mentioned and strangely a white line horizontally appeared. i guess its the end of the image. since its working with the other two i will just put them in the code

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.