Jump to content

How To Centre A Website Page Background?


reflex84

Recommended Posts

I haven't checked the code, but judging by your page's behaviour, it looks like your background image is contained within a wrapper <div> with 100% width. You should put the background image on the <body> element instead.Most people don't realise it, but wrapper <div>s usually aren't necessary, because the <body> element itself is a container that can be styled.

Link to comment
Share on other sites

I haven't checked the code, but judging by your page's behaviour, it looks like your background image is contained within a wrapper <div> with 100% width. You should put the background image on the <body> element instead.Most people don't realise it, but wrapper <div>s usually aren't necessary, because the <body> element itself is a container that can be styled.
Hi, Ok ... I'm really terrible at CSS and HTML coding (I battle to understand - something I need to work on!!!)For example, My website www.Mad-About-dance.org.za ... click on that link and see my background settings:
body {	background-image: url(bk.jpg);	margin-top: 0px;	background-attachment: fixed;	background-repeat: repeat-x;}

You say I must add a div wrapper? I've never dealt with Divs before (note I am more of a graphic designer than web / html design)Thanks for your help Ingolme!dale.

Link to comment
Share on other sites

Hi, Ok ... I'm really terrible at CSS and HTML coding (I battle to understand - something I need to work on!!!)For example, My website www.Mad-About-dance.org.za ... click on that link and see my background settings:
body {	background-image: url(bk.jpg);	margin-top: 0px;	background-attachment: fixed;	background-repeat: repeat-x;}

You say I must add a div wrapper? I've never dealt with Divs before (note I am more of a graphic designer than web / html design)Thanks for your help Ingolme!dale.

No, don't add a <div> wrapper. I was just under the impression that the background image on the site was in a wrapper <div>because of the fact that it doesn't cover the entire page when the window is resized.Try this:
html,body {margin: 0;padding: 0;background-image: url(file.jpg); /* Put the filename here */background-position: top center;background-repeat: no-repeat;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...