Why is my background not covering the whole page?

HTML & CSS
1

I am new to HTML/CSS and can’t seem to get my bg to cover the whole page, Its like it in a container but it’s not. MY website isn’t done yet its just ruffly layout.
New folder.zip (2.2 MB)

Thanks

2

You need background-size:cover if you want to cover the whole area. The value ‘contain’ will just ensure that it all fits but will be smaller than the viewport unless by accident it happens to be the same aspect ratio.

Also be aware that the body stretches with content so you would be better placing the whole page image as a fixed image and the best way to do that is like this.

body:before {
	content:"";
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1;
	display:block;
	background:url(../assets/img/newwebsitebg.png) no-repeat 50% 50%;
	background-size:cover;
}

If you are already using the before pseudo class on the body then you can just add an extra element into the html to do this.

The reason I use this method is explained here.

2 Likes
3

Specify the size of a background image with percentage

example1 {
background: url(website.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

example2 {
background: url(website.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
}

1 Like
4

Thanks @PaulOB @cmswebservices got it workling now

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.