How To Change Background Color In Div In Html
Things You Should Know
- Y'all can change the background color of a web page with HTML.
- Y'all'll need a numeric lawmaking for the color you want.
- When editing a web page with HTML, you can besides create a slope or changing backgrounds.
-
1
Decide the background color you want to use. HTML colors are dictated past codes on a per-shade footing. Y'all can utilize the costless W3Schools HTML color picker to find the code(southward) for the color(due south) you want to use:
- Go to https://www.w3schools.com/colors/colors_picker.asp in your computer'southward web browser.
- Click a base color yous'd similar to utilize in the "Selection a Color" section.
- Select a shade on the right side of the page.
- Write down the numeric lawmaking to the correct of the shade.
-
2
Open up your HTML file in your favorite text editor. As of HTML5, the <bgcolor> HTML aspect is no longer supported. Groundwork color, forth with all other mode aspects of your folio, 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 document. All of the style information for your page (including the background color) should be coded between the
<manner></style>tags:<! DOCTYPE html > < html > < head > < manner > </ style > </ head > </ html >
-
4
Create a blank line between the "style" tags. You lot should take a line on which yous tin add data below the
<mode>tag and higher up the</style>tag. -
5
Add the "body" element. Blazon the following in between the
<style></fashion>tags:- Annihilation you practise to the "body" element in CSS will affect the unabridged folio.
- Skip this pace if you desire to create a gradient.
Advertisement
-
1
Find your document's "html" header. It should be most the top of the certificate.
-
2
Add the "background-color" holding to the "trunk" chemical element. Type
background-color:between the body brackets. You should now have the post-obit "body" element:- In this context, only one spelling of "colour" will piece of work; you tin't use "colour" here.
torso { groundwork-color : }
-
3
Add your desired background colour to the "background-colour" property. Blazon your selected color's numeric code followed by a semicolon adjacent to the "background-colour:" chemical element to do then. For case, to prepare your page's groundwork to pinkish, you would have the following:
trunk { background-color : #d24dff ; }
-
4
Review your "style" information. At this bespeak, your HTML document's header should resemble the post-obit:
<! DOCTYPE html > < html > < caput > < fashion > body { background-color : #d24dff } </ style > </ head > </ html >
-
5
Utilise "background-color" to apply background colors to other elements. Only every bit you lot set information technology in the trunk element, you can utilise "background-color" to ascertain the backgrounds of other elements such as headers, paragraphs, and so on. For example, to utilize a background color to a main header (<h1>) or a paragraph (<p>), yous would have something resembling the following code:[2]
<! DOCTYPE html > < html > < head > < style > body { background-color : #93B874 ; } h1 { background-color : #00b33c ; } p { background-color : #FFFFFF ); } </ style > </ caput > < trunk > < h1 > Header with Green Background </ h1 > < p > Paragraph with white background </ p > </ body > </ html >
Ad
-
one
Find your document's "html" header. It should be almost the top of the certificate.
-
2
Sympathise the basic syntax of this process. When making a gradient, there are two pieces of information yous'll need: the starting betoken/angle, and the colors that the slope volition transition betwixt. Y'all tin select multiple colors to have the gradient move between all of them, and you can prepare a management or bending for the gradient.[three]
groundwork : linear-gradient ( direction / angle , color1 , color2 , color3 , etc .);
-
3
Make a vertical gradient. If you don't specify the direction, the gradient volition go from top to bottom. To create your gradient, add the post-obit code betwixt the
<style></fashion>tags:- Different browsers have unlike implementations of the slope function, and then you lot'll have to include several versions of the code.
html { min-height : 100 % ; } body { background : -webkit- linear-slope ( #93B874 , #C9DCB9 ); background : -o- linear-slope ( #93B874 , #C9DCB9 ); background : -moz- linear-slope ( #93B874 , #C9DCB9 ); background : linear-gradient ( #93B874 , #C9DCB9 ); background-colour : #93B874 ; }
-
4
Make a directional gradient. If you lot'd rather create a slope that isn't strictly vertical, y'all can add direction to the gradient in order to modify the manner the color shift appears. Do so by typing the following in betwixt the
<style></style>tags:[4]- You can play around with the "left" and "correct" tags to experiment with different directions for your slope.
html { min-height : 100 % ; } torso { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); background : -moz- linear-slope ( right , #93B874 , #C9DCB9 ); background : linear-gradient ( to right , #93B874 , #C9DCB9 ); groundwork-color : #93B874 ; }
-
5
Use other properties to adjust the gradient. In that location'south a lot more that you can do with gradients.
- For case, not but tin you add more ii colors, y'all can also put a per centum after each 1. This will allow you to set how much spacing yous want each color segment to have. Here'due south a sample gradient that uses this principle:
background : linear-slope ( # 93B874 10 %, # C9DCB9 70 %, # 000000 xc %);
- For case, not but tin you add more ii colors, y'all can also put a per centum after each 1. This will allow you to set how much spacing yous want each color segment to have. Here'due south a sample gradient that uses this principle:
-
6
Add transparency to your colors. This volition brand the color fade. Use the aforementioned color to fade from the color to nothing. You'll need to use the rgba() role to define the color. The catastrophe value determines the transparency: 0 for solid and 1 for transparent.
background : linear-gradient ( to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , i ));
-
7
Review your completed code. The code to create a color gradient as your website's background will wait something similar this:
<! DOCTYPE html > < html > < head > < style > html { min-height : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( correct , #93B874 , #C9DCB9 ); background : -moz- linear-slope ( right , #93B874 , #C9DCB9 ); groundwork : linear-gradient ( to right , #93B874 , #C9DCB9 ); groundwork-color : #93B874 ; } </ style > </ caput > < body > </ body > </ html >
Advertisement
-
1
Discover your document'due south "html" header. It should be nigh the meridian of the document.
-
2
Add together the blitheness property to the "body" chemical element. Blazon the following into the infinite beneath the "trunk {" bracket and above the endmost bracket:[v]
- The top line of text is for Chromium-based browsers while the bottom line of text is for other browsers.
-webkit-animation : colorchange 60s space ; animation : colorchange 60s space ;
-
three
Add together your colors to the blitheness. At present you'll use the @keyframes rule to ready the background colors through which y'all'll cycle, too as the length of time each colour will appear on the page. Again, y'all'll demand split up entries for the different sets of browsers. Enter the post-obit lines of code below the airtight "body" bracket:[6]
- Note that the two rules (@-webkit-keyframes and @keyframes have the same background colors and percentages. You lot'll want these to stay uniform so the feel is the aforementioned 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). Once the animation has played for 25% of of lx seconds, the background volition turn to #7821F, and so on.
- You tin alter the times and colors to fit your desired consequence.
@ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } @ keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { groundwork : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} }
-
4
Review your code. Your entire lawmaking for the changing background color should resemble the following:
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 due south infinite ; animation : colorchange 60 southward space ; } @ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} l % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } @ keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } </ style > </ head > < body > </ body > </ html >
Advertising
Add New Question
-
Question
How do I prepare a background color for a specific width?
Use the background-size property inside of the "torso" element. For instance, "groundwork-size: 300px 150px" makes the groundwork 300 pixels wide and 150 pixels high.
-
Question
It does non work. What can I do?
UsernameHere11
Customs Respond
To make it black, try: body { background-color: #190707}
-
Question
What is the right HTML for adding a background color?
My text goes here! Replace the html lawmaking to a higher place with your text and selected your preferred color.
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
-
If you lot desire to utilise basic colors within your HTML code, you lot can type the colors' names without the pound sign (#) instead of using an HTML color code. For example: to create an orange background, you would type in
background-colour: orange;here.
Thanks for submitting a tip for review!
Advertisement
-
Make sure you test whatever changes to your website before publishing them online.
Advertisement
Most This Commodity
Article Summary 10
1. Open the file.
ii. Find or insert the <style> </style> tags.
iii. Add the body chemical element.
4. Add the background-color property.
5. Insert the color code followed by a semicolon.
Did this summary assist you?
Thanks to all authors for creating a page that has been read 1,469,768 times.
Is this commodity upward to appointment?
How To Change Background Color In Div In Html,
Source: https://www.wikihow.com/Set-Background-Color-in-HTML
Posted by: harmonhareand.blogspot.com
0 Response to "How To Change Background Color In Div In Html"
Post a Comment