How To Change Html Background Color
-
1
Determine the background colour you want to utilize. HTML colors are dictated by codes on a per-shade basis. Y'all tin can apply the free W3Schools HTML colour picker to find the code(s) for the color(southward) you want to utilize:
- Go to https://www.w3schools.com/colors/colors_picker.asp in your computer's spider web browser.
- Click a base color yous'd like to use in the "Choice a Colour" section.
- Select a shade on the right side of the page.
- Write downward the numeric code to the right of the shade.
-
two
Open your HTML file in your favorite text editor. As of HTML5, the <bgcolor> HTML attribute is no longer supported. Groundwork color, along with all other style aspects of your page, should be handled using CSS.[i]
- You can use Notepad++ or Notepad on a Windows computer, while Mac users can edit with TextEdit or BBEdit.
Advertisement
-
3
Add the "html" header to your certificate. All of the style information for your page (including the background color) should be coded betwixt the
<way></fashion>tags:<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
four
Create a blank line between the "fashion" tags. You should have a line on which you tin add information below the
<fashion>tag and above the</style>tag. -
5
Add together the "trunk" chemical element. Type the following in between the
<fashion></style>tags:- Anything you exercise to the "torso" element in CSS volition affect the entire page.
- Skip this step if yous want to create a slope.
Advertisement
-
1
Notice your document's "html" header. It should be near the top of the certificate.
-
2
Add the "background-color" property to the "trunk" element. Type
groundwork-color:between the trunk brackets. You should now have the following "body" chemical element:- In this context, only i spelling of "color" will work; y'all can't utilize "color" hither.
body { background-colour : }
-
3
Add your desired background colour to the "background-color" belongings. Type your selected color's numeric code followed past a semicolon next to the "groundwork-color:" element to do then. For example, to gear up your page's background to pinkish, you would have the following:
body { background-color : #d24dff ; }
-
4
Review your "manner" information. At this point, your HTML certificate's header should resemble the following:
<! DOCTYPE html > < html > < head > < mode > body { background-color : #d24dff } </ style > </ head > </ html >
-
5
Use "background-colour" to apply background colors to other elements. Just as you lot set information technology in the body chemical element, you can use "background-colour" to define the backgrounds of other elements such as headers, paragraphs, and and then on. For case, to use a groundwork color to a main header (<h1>) or a paragraph (<p>), you would have something resembling the following lawmaking:[2]
<! DOCTYPE html > < html > < head > < style > torso { background-color : #93B874 ; } h1 { background-colour : #00b33c ; } p { background-color : #FFFFFF ); } </ fashion > </ head > < body > < h1 > Header with Green Background </ h1 > < p > Paragraph with white groundwork </ p > </ torso > </ html >
Advertisement
-
ane
Find your document's "html" header. It should be nigh the elevation of the certificate.
-
2
Understand the basic syntax of this process. When making a slope, there are two pieces of information yous'll need: the starting point/angle, and the colors that the slope will transition betwixt. You can select multiple colors to accept the gradient motion between all of them, and you lot tin can set a direction or angle for the gradient.[three]
background : linear-gradient ( direction / angle , color1 , color2 , color3 , etc .);
-
three
Make a vertical gradient. If y'all don't specify the direction, the gradient will go from top to bottom. To create your gradient, add together the following code betwixt the
<style></style>tags:- Different browsers accept dissimilar implementations of the gradient office, so y'all'll have to include several versions of the code.
html { min-superlative : 100 % ; } body { background : -webkit- linear-gradient ( #93B874 , #C9DCB9 ); background : -o- linear-gradient ( #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( #93B874 , #C9DCB9 ); background : linear-gradient ( #93B874 , #C9DCB9 ); background-color : #93B874 ; }
-
4
Make a directional slope. If you'd rather create a slope that isn't strictly vertical, you can add direction to the gradient in order to change the way the color shift appears. Do so by typing the following in betwixt the
<style></style>tags:[iv]- You tin play effectually with the "left" and "right" tags to experiment with different directions for your slope.
html { min-height : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-slope ( right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); groundwork : linear-gradient ( to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; }
-
5
Utilise other properties to adjust the slope. There's a lot more that you can practise with gradients.
- For example, non only can yous add together more than two colors, yous can also put a percentage after each one. This will allow you lot to set up how much spacing you want each color segment to have. Here'due south a sample gradient that uses this principle:
background : linear-gradient ( # 93B874 x %, # C9DCB9 70 %, # 000000 90 %);
- For example, non only can yous add together more than two colors, yous can also put a percentage after each one. This will allow you lot to set up how much spacing you want each color segment to have. Here'due south a sample gradient that uses this principle:
-
vi
Add transparency to your colors. This will brand the color fade. Use the same colour to fade from the colour to cipher. You'll need to use the rgba() function to define the color. The ending value determines the transparency: 0 for solid and i for transparent.
background : linear-gradient ( to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , ane ));
-
seven
Review your completed code. The code to create a color gradient as your website'due south background will look something like this:
<! DOCTYPE html > < html > < head > < mode > html { min-height : 100 % ; } body { groundwork : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); background : linear-slope ( to right , #93B874 , #C9DCB9 ); groundwork-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
Advertising
-
1
Find your certificate'south "html" header. Information technology should be near the superlative of the document.
-
ii
Add the animation belongings to the "body" element. Type the following into the space below the "body {" bracket and above the closing bracket:[v]
- The pinnacle line of text is for Chromium-based browsers while the bottom line of text is for other browsers.
-webkit-animation : colorchange 60s infinite ; animation : colorchange 60s infinite ;
-
3
Add your colors to the animation. Now you'll employ the @keyframes rule to set the groundwork colors through which you'll cycle, as well as the length of time each color will appear on the page. Again, you'll need dissever entries for the different sets of browsers. Enter the post-obit lines of code below the airtight "body" bracket:[half dozen]
- Note that the 2 rules (@-webkit-keyframes and @keyframes have the same background colors and percentages. You lot'll want these to stay compatible and then the experience is the same on all browsers.
- The percentages (0%, 25%, etc) are of the total animation length (60s). When the folio loads, the background volition exist the color set at 0% (#33FFF3). Once the animation has played for 25% of of 60 seconds, the background will turn to #7821F, and and so on.
- You tin can modify the times and colors to fit your desired upshot.
@ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { groundwork : #9B59B6 ;} } @ keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} l % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} }
-
4
Review your lawmaking. Your unabridged lawmaking for the changing background color should resemble the following:
<! DOCTYPE html > < html > < caput > < fashion > body { -webkit- animation : colorchange 60 southward infinite ; animation : colorchange sixty southward space ; } @ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { groundwork : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { groundwork : #9B59B6 ;} } @ keyframes colorchange { 0 % { groundwork : #33FFF3 ;} 25 % { background : #78281F ;} l % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } </ manner > </ head > < body > </ body > </ html >
Advertisement
Add New Question
-
Question
How do I ready a groundwork color for a specific width?
Use the background-size property within of the "body" chemical element. For example, "background-size: 300px 150px" makes the groundwork 300 pixels wide and 150 pixels high.
-
Question
It does non work. What tin I do?
UsernameHere11
Community Answer
To make information technology blackness, try: trunk { background-color: #190707}
-
Question
What is the right HTML for adding a groundwork color?
My text goes here! Replace the html lawmaking above with your text and selected your preferred color.
-
Question
How do I underline my text?
Pulasthi Udugamasooriya
Community Answer
Use the {{kbd|}} and {{kbd|}} tags effectually the text to be underlined, similar so: {{kbd|My Heading}}
-
Question
How practise I alter the background colour in my email account?
Go to Settings (non account settings), then press "Themes" or "Change Groundwork".
-
Question
How do I apply more than two colors on my website?
Use the gradient function provided above and put the 2 dissimilar colors at 50%. For example: background: -webkit-linear-gradient(left, blue 50%, black 50%);.
-
Question
Backgrounds within backgrounds poss? Page has all-over background colour. How to add together responsive padded groundwork of slightly darker colour behind just text column?
You are talking well-nigh a double edge page. Look in Google for double border templates. Some come with the coding to make information technology, and so all you demand to do is put in the filename of your images.
-
Question
How practise I modify just a small department of the groundwork to a specific color?
You'd take to specify the section, starting time. Usually that's done in external css, or in-line css.
-
Question
How can I add together CSS to my simple html web design? Do I accept to open some other notepad or bring together the styling to my HTML?
If you desire the CSS to control all pages, yes, you'd put it into its own file with CSS as the file extension. You'd then link the CSS file to your pages (in the coding). If you want it on one folio, or just certain styling, y'all'd put the CSS in the coding.
-
Question
Should I put this under the images in my HTML website?
Brand a folder called images. Put all images used on your website (for the page itself) into that folder. But permit'southward say you accept pages near Canada and images specific to that state. You could make a separate folder chosen images-ca . Helps to exist organized.
Testify more than answers
Ask a Question
200 characters left
Include your email address to get a bulletin when this question is answered.
Submit
Advertizement
-
If you want to use basic colors inside your HTML code, y'all can blazon the colors' names without the pound sign (#) instead of using an HTML color lawmaking. For example: to create an orange groundwork, you lot would type in
background-color: orange;here.
Advertisement
-
Brand sure you lot exam any changes to your website before publishing them online.
Advertisement
About This Article
Article Summary X
1. Open the file.
2. Observe or insert the <mode> </way> tags.
3. Add the body element.
4. Add the background-colour belongings.
5. Insert the colour lawmaking followed by a semicolon.
Did this summary assist you lot?
Thanks to all authors for creating a folio that has been read i,445,030 times.
Is this article upwards to date?
How To Change Html Background Color,
Source: https://www.wikihow.com/Set-Background-Color-in-HTML
Posted by: sumterhorged.blogspot.com
0 Response to "How To Change Html Background Color"
Post a Comment