In CSS, am I able to make a image in the background that sits in the centre and doesn't repeat?

Question

or solve this problem some other way?

My problem is, I want to make the content of a website all fit in a an image, that will basically be a grungy gradient, from the white of the content, to black.

First of all, am I able to make it so this image and the content stretches to the window size without losing quality?
and secondly, I was thinking to save loading time, I could just have the gradient going from white to black, then have the solid colour black that the gradient turns into as a plain background-color thing.
i.e have an image for the gradient, then a css background-color for the black.

In general I'm pretty hopeless with this stuff, so any help if you can understand what I'm trying to do would be much appreciated.

Answer 1

You could do something like this:



this is the

name for your content area ---->#divname {

background-image:url(contentback.png);

background-position:center;

background-size:100% 100%;

background-repeat:no-repeat;

}



The 100% 100% on your size is height and width which you can change as needed. This will make the image 100% the height of the content area and 100% the width of the content area.

The no repeat makes the image....well not repeat. This is essential if you need to make it smaller than 100% or the image wont look right. 100% is not the maximum value either. You can make it greater than 100%.

can't guarantee anything for quality. Just make it really big and then when it is downsized to fit in your content area it will look alright.



but your second question would take quite a little bit of experimentation. I have no definite answer but you could just change the image to a more suitable file type if you are concerned about load times.



another tip: if you are getting into CSS i suggest using floating layouts with percent sizes. Everything will stay together perfectly no matter the size of the window. Hope this somewhat helps.

-----------------------------------------------------------------------------------------------------------------------------------------------

***update

not sure if this what ur doin but here goes anyway:

i have this image: http://techoneshop.com/contentback.png

centered in my content area u can see here : http://techoneshop.com/ceomusic.htm

u can look at my CSS source here:



@charset "utf-8";

/* CSS Document */



#header{





width:50%;

padding:1%;

margin-right:16%;

margin-left:19%;

padding-bottom:50px;

}

#content{

background-image:url(contentback.png);

background-position:center;

background-size:110% 80%;

background-repeat:no-repeat;

float:left;

width:50%;

height:auto;

padding:3%;

}

#leftpanel{

margin-left:3%;



float:left;

width: 15%;

padding:1%;

}



#rightpanel{



float:left;

width:15%;

padding:1%;



}

#footer {

float:left;

width:100%;

text-decoration: none;

color:#fff;

a:link{ color: white;}





}



#navbar ul {

margin: 0;

padding: 5px;

list-style-type: none;

text-align: center;

background-color: #000;

}



#navbar ul li {

display: inline;

}



#navbar ul li a {

text-decoration: none;

padding: .2em 1em;

color: #fff;

background-color: #000;

}



#navbar ul li a:hover {

color: #000;

background-color: #fff;

} #footer p {

font-size: small;

}





this is the CSS for 3 column layout with header and footer

my image is in the #contentpanel section. You can see my formatting there.





again not sure if this is what u need but a tip anyways.

Answer 2

Unfortunately you can't have an image that looks good on all resolutions unless the image is a high resolution image, and if the image is a high resolution it will take a long time for your image to load, which is something you won't want. You can however have a med resolution image and set it in the center with a fixed width and height, then just fill the extra area with a low contrast color that blends in with your image.

Answer 3

you can use an image or you can use CSS or both. Here is a link to 2 sample html files and an image I created for you. Check out the class style on both and you will see how to do it.

This is the file share link. http://ge.tt/8vdTCQ7?c