Welcome

To the TechViewForum

Happy birthday!

Thank you!

[CLOSED] Make an image cover the entire page (CSS)

Web

new

« Prev
1
Next »

bobowk

Quote

Post by bobowk on Nov 24, 2016 15:59:43 GMT 10

How can I make a background-image the size of the screen. i want it similar to Prezence 's website which is available at here

My code which I am using right now is:

body{

margin:0px;

}

.banner {

background-image:url("/images/bg1.jpg");

min-height:700px;

background-position: center center;

background-repeat:  no-repeat;

background-attachment: fixed;

background-size:  cover;

background-color: #999;

}

I'm happy with any format of code (HTML, CSS, JAVASCRIPT).
Thanks!

[CLOSED] Make an image cover the entire page (CSS)

Posted

Nov 24, 2016 15:59:43 GMT 10

Last Edit: Nov 27, 2016 8:37:11 GMT 10 by bobowk

Nathan Lecompte

Quote

Post by Nathan Lecompte on Nov 24, 2016 21:35:24 GMT 10

Do you mean just length wise or height wise as well?

If you just want it to stretch across the page length wise just add a parameter to set the Width to 100%.

So your code would basically just look like this:

body{
margin:0px;
}
.banner {
background-image:url("/images/bg1.jpg");
min-height:700px;
width:100%;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}

[CLOSED] Make an image cover the entire page (CSS)

Posted

Nov 24, 2016 21:35:24 GMT 10

Last Edit: Nov 24, 2016 21:37:13 GMT 10 by Nathan Lecompte

Shoutbox

slay Apr 8, 2024 15:27:58 GMT 10