Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Put image at top of page

I need to have an image at the top-center of a web page in css. Now, Im just using the background-image: in css but this puts it at the middle of the page.

Here's my code:

body {
  background-image: url("theimageurlgoeshere"); //The image is 842 x 508
  background-attachment:fixed;
  background-position: center top;
  background-repeat: no-repeat;
}

Also, Changing the background-position: seems to have no effect on the outcome of the site. Any help is appreciated.

like image 238
nosedive25 Avatar asked May 20 '10 23:05

nosedive25


People also ask

How will you add an image at the top of your web page?

To insert an image in HTML, use the image tag and include a source and alt attribute. Like any other HTML element, you'll add images to the body section of your HTML file. The HTML image element is an “empty element,” meaning it does not have a closing tag.

How do I align an image to the top right in CSS?

Try using float: right; and a new div for the top so that the image will stay on top.


2 Answers

Change the arrangement of these values from center top to top center

background-position: top center;

Tested in Safari 4, Chrome, and FF 3.5

The code I used in testing was:

 body { background: url(./image.png) no-repeat top center; }
like image 121
Riley Avatar answered Sep 18 '22 08:09

Riley


And if you want it on a single line:

body {
  background: url('path') center top fixed no-repeat;
}

More info: http://www.w3schools.com/css/pr_background-position.asp

like image 26
Alec Avatar answered Sep 18 '22 08:09

Alec