newcoder1010 Posted October 20, 2015 Share Posted October 20, 2015 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 More sharing options...
davej Posted October 20, 2015 Share Posted October 20, 2015 Have you tried... background-size: 100% 100%; Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 21, 2015 Author Share Posted October 21, 2015 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 More sharing options...
newcoder1010 Posted October 21, 2015 Author Share Posted October 21, 2015 I made some progress. change background-size t0 100% 50% for the first image. How can I do the second part? Link to comment Share on other sites More sharing options...
davej Posted October 21, 2015 Share Posted October 21, 2015 You can experiment with the various attributes... http://www.w3schools.com/cssref/css3_pr_background.asp Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 21, 2015 Author Share Posted October 21, 2015 I did look at the http://www.w3schools.com/cssref/css3_pr_background-size.asp. I could not figure out how to add the 2nd image in the bottom? The tutorial is only showing with one image. If you could help. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 21, 2015 Share Posted October 21, 2015 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 More sharing options...
newcoder1010 Posted October 21, 2015 Author Share Posted October 21, 2015 It worked. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now