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.
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.
Try using float: right; and a new div for the top so that the image will stay on top.
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; }
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With