Jump to content

How to write full screen background image


newcoder1010
 Share

Recommended Posts

Hello,

 

I have the below code. I like to make it 100 % full screen as background without repeating. It does not repeat. that's great but How can I make it full screen? I did google search but still confused.

.html {background-image: url("sss.jpg");background-repeat: no-repeat;width: 100%;}

Can you please help?

Link to comment
Share on other sites

It worked. Thanks.

 

Because it worked, it led me to another question.

 

I have two images. I like to see image1 as 100% full width of the screen but 50 % top of the screen. The other image takes 100 % full width of the screen and bottom 50% of the screen. How can I update my below css?

.html {background-image: url("sss.jpg");background-repeat: no-repeat;background-size: 100% 100%;}
Link to comment
Share on other sites

Using below code at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple you can get idea on how to set two image background properties.

<!DOCTYPE html><html><head><style> html,body {height: 100%;}body {    background: url("img_tree.gif") no-repeat left top/100% 50%, url("img_flwr.gif") repeat-x right bottom/50% 75%;    background-color: #cccccc;}</style></head><body></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...