Background Image

Hey guys,

I am teaching myself HTML/CSS I am having trouble with the background image though.
I wanted to have a single image and not have it tiled. I thought I had it right but it doesnt seem to work for me.(I took out the website for appearance. it took a lot of space)

body {
background-image: url("urlsite");
background-repeat:repeat-y;
margin: 0 auto;
font-family:georgia, times,serif;
width: 1000px;
}

Thanks for your time

 

Maybe:

body {
background-image: url("urlsite");
background-repeat: no-repeat;
margin: 0 auto;
font-family:georgia, times,serif;
width: 1000px;
}

 

That did work, however, now it isn't spanning the whole page. The picture is only taking half of the page. I am assuming the image is to small? I am creating a single page website. Is there a way to expand the picture without ruining the image?

Thanks for your help

 

Thanks for the offer, but before I have you spend your time on it. The website is W: 1000px H: 3500. Is the picture going to be distorted?

 

Why? I can think of only two reasons for that silliness, and neither are good: You simply don't have any content to speak of, or you're a print designer with minimal understanding of the web.

The image will be distorted if you scale it without maintaining the natural aspect ratio. For example, if you need to double the height and you don't also double the width, the image will be stretched vertically. If you do double both, the width will be 2000px wide and you will lose half to the side(s). Further, any enlargement will introduce pixelation.

cheers,

gary

 

I guess you didn't read from the beginning. I am teaching myself html/css. I wanted to create a single page with no other reason than to learn. I am running into problems, I am asking questions. Not sure what the point of that statement was...

But thank you for the latter response...

 

Ah, but I did. That you are learning does not imply you are not building a web page for use. For my first site, built for a friend because I knew 'all about computers and stuff', I had to learn html, javascript and php on the fly. CSS was around then but not much used.

The point I was trying to make is that the single page site is, at best, a crutch to compensate for lack of content, and at worst, a print oriented designer's failed attempt to look kewl.

Since you're treating this as a learning exercise, I suggest there are lots of other stuff you should work on first.

cheers,

gary

 

I would use a fixed position (background: url("urlsite") no-repeat center center fixed; ) so that when you scroll down, the background stays in place. That way you wont distort your image.