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.
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.