How To Make Html Background Color
-
1
Determine the groundwork color you want to use. HTML colors are dictated by codes on a per-shade basis. You tin employ the free W3Schools HTML colour picker to find the code(s) for the colour(s) you lot desire to use:
- Go to https://www.w3schools.com/colors/colors_picker.asp in your computer's web browser.
- Click a base colour you'd similar to use in the "Pick a Color" section.
- Select a shade on the right side of the page.
- Write downwardly the numeric code to the right of the shade.
-
2
Open your HTML file in your favorite text editor. As of HTML5, the <bgcolor> HTML attribute is no longer supported. Groundwork color, forth with all other style aspects of your page, should be handled using CSS.[1]
- Yous can use Notepad++ or Notepad on a Windows computer, while Mac users tin can edit with TextEdit or BBEdit.
Advertisement
-
3
Add the "html" header to your document. All of the style information for your page (including the background colour) should be coded between the
<way></style>tags:<! DOCTYPE html > < html > < head > < style > </ style > </ caput > </ html >
-
four
Create a blank line betwixt the "style" tags. Yous should accept a line on which you lot can add information below the
<style>tag and above the</way>tag. -
5
Add the "body" element. Type the post-obit in between the
<style></style>tags:- Anything you practice to the "body" element in CSS volition touch the entire folio.
- Skip this step if y'all want to create a gradient.
Ad
-
1
Find your document's "html" header. Information technology should be near the top of the document.
-
2
Add the "background-color" holding to the "body" element. Type
background-color:between the body brackets. You should now have the following "body" element:- In this context, merely one spelling of "color" will work; you can't apply "colour" here.
trunk { groundwork-color : }
-
iii
Add your desired background colour to the "background-colour" holding. Type your selected color's numeric lawmaking followed by a semicolon side by side to the "background-colour:" element to exercise then. For example, to ready your page'south background to pink, yous would have the post-obit:
trunk { groundwork-color : #d24dff ; }
-
4
Review your "style" information. At this point, your HTML document's header should resemble the post-obit:
<! DOCTYPE html > < html > < head > < style > torso { groundwork-colour : #d24dff } </ mode > </ head > </ html >
-
5
Use "background-color" to apply groundwork colors to other elements. Just as you gear up it in the trunk element, you lot tin can employ "background-colour" to ascertain the backgrounds of other elements such as headers, paragraphs, so on. For example, to apply a background colour to a main header (<h1>) or a paragraph (<p>), you would have something resembling the post-obit lawmaking:[two]
<! DOCTYPE html > < html > < head > < style > body { background-color : #93B874 ; } h1 { background-color : #00b33c ; } p { background-color : #FFFFFF ); } </ mode > </ head > < trunk > < h1 > Header with Dark-green Groundwork </ h1 > < p > Paragraph with white background </ p > </ torso > </ html >
Advertising
-
1
Find your document's "html" header. Information technology should be well-nigh the top of the certificate.
-
2
Understand the basic syntax of this procedure. When making a gradient, in that location are two pieces of information you'll need: the starting point/bending, and the colors that the gradient will transition between. You can select multiple colors to accept the gradient move betwixt all of them, and you can ready a management or angle for the gradient.[iii]
groundwork : linear-slope ( management / angle , color1 , color2 , color3 , etc .);
-
3
Make a vertical gradient. If y'all don't specify the direction, the gradient volition get from top to bottom. To create your gradient, add the following lawmaking between the
<style></style>tags:- Dissimilar browsers have unlike implementations of the slope function, and so yous'll have to include several versions of the lawmaking.
html { min-top : 100 % ; } body { background : -webkit- linear-gradient ( #93B874 , #C9DCB9 ); background : -o- linear-slope ( #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( #93B874 , #C9DCB9 ); groundwork : linear-gradient ( #93B874 , #C9DCB9 ); background-color : #93B874 ; }
-
4
Make a directional gradient. If you'd rather create a gradient that isn't strictly vertical, you tin can add direction to the gradient in order to modify the way the color shift appears. Do so past typing the post-obit in betwixt the
<style></style>tags:[four]- Yous tin play around with the "left" and "right" tags to experiment with unlike directions for your gradient.
html { min-superlative : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( correct , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( correct , #93B874 , #C9DCB9 ); background : linear-gradient ( to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; }
-
5
Utilize other properties to arrange the gradient. There's a lot more that you can do with gradients.
- For example, not only can you add together more two colors, y'all can as well put a percentage afterward each one. This will permit you lot to set how much spacing you lot want each color segment to take. Here'due south a sample gradient that uses this principle:
background : linear-gradient ( # 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- For example, not only can you add together more two colors, y'all can as well put a percentage afterward each one. This will permit you lot to set how much spacing you lot want each color segment to take. Here'due south a sample gradient that uses this principle:
-
6
Add together transparency to your colors. This will make the color fade. Apply the aforementioned color to fade from the color to naught. You'll demand to utilise 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 , one ));
-
7
Review your completed code. The code to create a color gradient every bit your website's background will look something similar this:
<! DOCTYPE html > < html > < head > < mode > html { min-peak : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); background : linear-gradient ( to right , #93B874 , #C9DCB9 ); groundwork-color : #93B874 ; } </ mode > </ head > < body > </ body > </ html >
Advertisement
-
1
Discover your document's "html" header. It should exist near the top of the document.
-
two
Add the blitheness property to the "trunk" chemical element. Type the following into the space beneath the "trunk {" subclass and above the closing bracket:[5]
- The meridian line of text is for Chromium-based browsers while the bottom line of text is for other browsers.
-webkit-blitheness : colorchange 60s infinite ; animation : colorchange 60s infinite ;
-
iii
Add your colors to the animation. Now you'll use the @keyframes rule to set the background colors through which you'll cycle, equally well as the length of fourth dimension each colour will appear on the page. Over again, you lot'll need dissever entries for the unlike sets of browsers. Enter the following lines of code below the closed "torso" bracket:[6]
- Annotation that the two rules (@-webkit-keyframes and @keyframes have the aforementioned background colors and percentages. You'll want these to stay compatible so the experience is the same on all browsers.
- The percentages (0%, 25%, etc) are of the total animation length (60s). When the page loads, the background will be the color set at 0% (#33FFF3). In one case the animation has played for 25% of of 60 seconds, the background volition turn to #7821F, and so on.
- You tin change the times and colors to fit your desired outcome.
@ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { groundwork : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { groundwork : #9B59B6 ;} } @ keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { groundwork : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} }
-
4
Review your lawmaking. Your entire lawmaking for the irresolute background colour should resemble the following:
<! DOCTYPE html > < html > < head > < style > body { -webkit- blitheness : colorchange threescore s space ; animation : colorchange lx s infinite ; } @ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { groundwork : #DC7633 ;} 100 % { background : #9B59B6 ;} } @ keyframes colorchange { 0 % { groundwork : #33FFF3 ;} 25 % { background : #78281F ;} l % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } </ style > </ head > < torso > </ torso > </ html >
Advertisement
Add New Question
-
Question
How do I gear up a background color for a specific width?
Use the background-size property inside of the "body" chemical element. For example, "background-size: 300px 150px" makes the background 300 pixels wide and 150 pixels high.
-
Question
It does not piece of work. What can I do?
UsernameHere11
Community Respond
To brand it black, try: body { background-color: #190707}
-
Question
What is the correct HTML for calculation a background color?
My text goes hither! Replace the html code above with your text and selected your preferred color.
-
Question
How do I underline my text?
Pulasthi Udugamasooriya
Customs Answer
Use the {{kbd|}} and {{kbd|}} tags around the text to exist underlined, similar so: {{kbd|My Heading}}
-
Question
How do I change the groundwork colour in my due east-mail business relationship?
Become to Settings (non account settings), then press "Themes" or "Change Background".
-
Question
How do I use more than 2 colors on my website?
Use the gradient function provided above and put the 2 dissimilar colors at 50%. For instance: background: -webkit-linear-gradient(left, blue 50%, black l%);.
-
Question
Backgrounds within backgrounds poss? Page has all-over groundwork colour. How to add responsive padded background of slightly darker colour backside but text column?
You are talking about a double edge page. Await in Google for double border templates. Some come with the coding to make it, then all y'all need to exercise is put in the filename of your images.
-
Question
How do I change but a small section of the groundwork to a specific colour?
You'd take to specify the department, first. Ordinarily that's done in external css, or in-line css.
-
Question
How tin I add together CSS to my simple html web design? Do I accept to open another notepad or join the styling to my HTML?
If you want the CSS to control all pages, yes, you'd put information technology into its own file with CSS as the file extension. You lot'd then link the CSS file to your pages (in the coding). If you want information technology on 1 page, or but sure styling, yous'd put the CSS in the coding.
-
Question
Should I put this under the images in my HTML website?
Make a binder called images. Put all images used on your website (for the folio itself) into that folder. But let'south say you accept pages virtually Canada and images specific to that country. You could make a carve up binder chosen images-ca . Helps to be organized.
Bear witness more than answers
Inquire a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
-
If you want to use basic colors within your HTML code, y'all can blazon the colors' names without the pound sign (#) instead of using an HTML color lawmaking. For instance: to create an orange background, yous would type in
background-color: orangish;here.
Advertising
-
Make sure you exam any changes to your website before publishing them online.
Advertizement
About This Commodity
Commodity Summary X
1. Open up the file.
ii. Detect or insert the <fashion> </style> tags.
3. Add together the body element.
4. Add the background-color property.
5. Insert the color code followed by a semicolon.
Did this summary assist y'all?
Cheers to all authors for creating a page that has been read one,445,974 times.
Is this article up to date?
How To Make Html Background Color,
Source: https://www.wikihow.com/Set-Background-Color-in-HTML
Posted by: wrightsagessay.blogspot.com
0 Response to "How To Make Html Background Color"
Post a Comment