Fmdpa Posted April 1, 2010 Share Posted April 1, 2010 I'm sure this is a simple question, but I just can't figure it out. I want to create a web page with a simple black background, which I do know how to do. But here's this problem. But over that black BG, I want to insert an ONE COPY of an image centered as the background of the actual web page, where everything will be located. So this image will cover something like 80-90% of the page width. When I do "<body background="*.jpg">..." it just repeats the image. When I insert it as <img src="*.jpg">... it treats it as an image (which it is), instead of a background and I can't place anything on top of it. I think a lot of my trouble is getting the image to align in the middle and not repeat itself. Thanks for your help!P.S. I am not interested in "convenient methods" that bypass the programming. My goal is to learn more HTML, JavaScript, etc. Link to comment Share on other sites More sharing options...
real_illusions Posted April 1, 2010 Share Posted April 1, 2010 You need a bit of CSS magic :)You need to put this line into your CSS file, remember to set the right path to the image. This line assumes the image sits in the same folder as the CSS file.body{background: url(image.jpg) top middle no-repeat;}Should be self explanatory Link to comment Share on other sites More sharing options...
Fmdpa Posted April 6, 2010 Author Share Posted April 6, 2010 Thanks! I really should undertake learning more CSS, but until then, this should work. I'll give it a try. Link to comment Share on other sites More sharing options...
Fmdpa Posted April 6, 2010 Author Share Posted April 6, 2010 You need a bit of CSS magic :)You need to put this line into your CSS file, remember to set the right path to the image. This line assumes the image sits in the same folder as the CSS file.body{background: url(image.jpg) top middle no-repeat;}Should be self explanatory I tried this, but it didn't work. I want a black background and the centered image over that. The code looks right, or at least close. Could you give me the exact code to put in my HTML file? For example: <body background: url("image.jpg") top middle no-repeat; background-color:black;>...</body ???I know when insterting JS into an HTML doc, you have to write <script type="text/JavaScript">. Do you have to do something like this with CSS? Link to comment Share on other sites More sharing options...
Synook Posted April 7, 2010 Share Posted April 7, 2010 If you want to write CSS inline, you need to use the style attribute. It's better to place everything in a stylesheet, however. Link to comment Share on other sites More sharing options...
jeffman Posted April 7, 2010 Share Posted April 7, 2010 If you want this in a style sheet in the head of your document, try this: <style type="text/css"> body { background-color: #000; background-image: url("image.jpg"); background-repeat: no-repeat; background-position: top middle; }</style> I purposely did not use the shorthand version because I want you to understand what you're doing.Realize that this stuff should not be combined with presentational attributes in your body tag. The best body tag looks like this: <body> and that's all. Link to comment Share on other sites More sharing options...
Fmdpa Posted April 9, 2010 Author Share Posted April 9, 2010 I'm understanding fairly well the concepts in CSS. I would still love to become fluent in it, but I just don't have time for that yet. Is there any reason programmers usually use hexadecimal color # for colors like black?One more thing: I tried the code you posted and it didn't really help too much. My problem is that the background image is longer than the page, so it needs to be scrolled down. Instead of that, the image is just cut to fit the page. I know how to align it to make different parts of the image display, but I want to be able to see the entire image without it being cropped. Any ideas? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.