Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Programming languages | HTML | Responsive full screen background using only CSS
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

Responsive full screen background using only CSS

Responsive full screen backgrounds have been lately trending all over the web. Let's learn how to create one without any scripts using pure CSS only.

 
  Author: mat | Version: | 13th August 2013 |  
 
 
1.
 

Using your favorite web code editor such as Notepad++ or Adobe Dreamweaver, create a new styles.css document and enter/paste the following code:

html {
min-height: 100%;
background-size: cover;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}

body{
min-height:100%;
}

Where background.jpg is an image of the background you want to use. I suggest you to use the image with a size of 1650x1050 so people with big screen resolutions will be able to enjoy the high quality background image.

Also recommended if you are a css beginner:

 
 
2.
 

In the index.html document enter the following code before the </head> tag:

<link rel="stylesheet" href="styles.css" />

Make sure you save the index.html, styles.css and your background image in the same folder on your web server, otherwise you will need to change paths in the code.

Also recommended:

 
 
3.
 

And this is how my responsive full screen background looks like with some text added.

Click to see or download my responsive full screen background web page and you can also download the styles.css file from this tuts.

 
 
 
   
  Please login to post a comment
  Click to open user profile  
thefansbuzz, 19th Feb 2023, 7:32 PM
Cheap SMM Panel Social Media Marketing is a huge field with a lot of competition. If you want to stand out from the crowd, you need to know how to find ways to make your content go viral. If you are interested in using social media to market your product, this service is perfect for you. The panel gives you access to hundreds of different social media sites, so that you can find new ways to market your business. Visit our website at: https://thefansbuzz.com/
 
 
  Click to open user profile  
smm panel ind, 20th Nov 2023, 10:48 AM
Within the ever changing world of social media, an https://smmpakpanel.com/ is a practical instrument that makes it easier to buy followers, likes, and engagement metrics. But in order to maintain a strong and real online presence, users must exercise caution, make sure that they are in compliance with platform policies, and give top priority to a balanced combination of SMM panel services and organic growth strategies.
 
 
  Click to open user profile  
Cheapest smm , 29th Nov 2023, 8:03 PM
When looking for an affordable social media management solution, I always turn to the . It is the ideal option for marketers on a tight budget because it provides excellent services at competitive costs. Boost your internet visibility without going over budget!
 
 
  Click to open user profile  
boles9, 13th Dec 2023, 6:22 PM
There are always 구글 상위노출 opportunities in your niche waiting to be discovered. Are you ready to seize them?https://backlinkhigh.com
 
 
  Click to open user profile  
jbabeyy, 18th Dec 2023, 10:55 PM
Popular social media influencer JBabeyy is well-known for creating interesting content on websites like TikTok. Because of her relatability and genuineness, JBabeyy has become very popular with people all around the globe.
 
 
  Click to open user profile  
boles9, 20th Dec 2023, 11:44 AM
I'm grateful to 뉴토끼 for making webtoon exploration so accessible and enjoyable.https://www.뉴토끼.tips
 
 
  Click to open user profile  
boles9, 21st Dec 2023, 2:52 PM
Lag-free streams make 축구중계 a fan favorite.https://speed-25.com
 
 
  Click to open user profile  
boles9, 25th Dec 2023, 8:42 AM
Kudos to the creators of 뉴토끼 for their dedication to delivering exceptional webtoon content.https://www.newwebtoon.net
 
 
  Click to open user profile  
DianaZeldin, 31st Dec 2023, 1:23 PM
[https://www.todaypunch.com/diana-zeldin-unmasking-the-mystery-behind-lee-zeldins-partner/](Diana Zeldin) is a calm mother of twin kids and the spouse of politician Lee Zeldin. In the realm of intellectual property, she functions analogous to a covert agent, adding excitement and privacy to proceedings.
 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO