Given the Code Set Your Background Colors to Blue
-
1
Determine the background color you want to use. HTML colors are dictated by codes on a per-shade basis. You can use the free W3Schools HTML color picker to find the code(s) for the color(s) you want to use:
- Go to https://www.w3schools.com/colors/colors_picker.asp in your computer's web browser.
- Click a base color you'd like to use in the "Pick a Color" section.
- Select a shade on the right side of the page.
- Write down 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. Background color, along with all other style aspects of your page, should be handled using CSS.[1]
- 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
<style></style>tags:<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
4
Create a blank line between the "style" tags. You should have a line on which you can add information below the
<style>tag and above the</style>tag. -
5
Add the "body" element. Type the following in between the
<style></style>tags:- Anything you do to the "body" element in CSS will affect the entire page.
- Skip this step if you want to create a gradient.
Advertisement
-
1
Find your document's "html" header. It should be near the top of the document.
-
2
Add the "background-color" property to the "body" element. Type
background-color:between the body brackets. You should now have the following "body" element:- In this context, only one spelling of "color" will work; you can't use "colour" here.
body { background-color : }
-
3
Add your desired background color to the "background-color" property. Type your selected color's numeric code followed by a semicolon next to the "background-color:" element to do so. For example, to set your page's background to pink, you would have the following:
body { background-color : #d24dff ; }
-
4
Review your "style" information. At this point, your HTML document's header should resemble the following:
<! DOCTYPE html > < html > < head > < style > body { background-color : #d24dff } </ style > </ head > </ html >
-
5
Use "background-color" to apply background colors to other elements. Just as you set it in the body element, you can use "background-color" to define the backgrounds of other elements such as headers, paragraphs, and so on. For example, to apply a background color to a main header (<h1>) or a paragraph (<p>), you 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 > </ head > < body > < h1 > Header with Green Background </ h1 > < p > Paragraph with white background </ p > </ body > </ html >
Advertisement
-
1
Find your document's "html" header. It should be near the top of the document.
-
2
Understand the basic syntax of this process. When making a gradient, there are two pieces of information you'll need: the starting point/angle, and the colors that the gradient will transition between. You can select multiple colors to have the gradient move between all of them, and you can set a direction or angle for the gradient.[3]
background : linear-gradient ( direction / angle , color1 , color2 , color3 , etc .);
-
3
Make a vertical gradient. If you don't specify the direction, the gradient will go from top to bottom. To create your gradient, add the following code between the
<style></style>tags:- Different browsers have different implementations of the gradient function, so you'll have to include several versions of the code.
html { min-height : 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 gradient. If you'd rather create a gradient 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 between the
<style></style>tags:[4]- You can play around with the "left" and "right" tags to experiment with different directions for your gradient.
html { min-height : 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 ); background-color : #93B874 ; }
-
5
Use other properties to adjust the gradient. There's a lot more that you can do with gradients.
- For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. Here's a sample gradient that uses this principle:
background : linear-gradient ( # 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. Here's a sample gradient that uses this principle:
-
6
Add transparency to your colors. This will make the color fade. Use the same color to fade from the color to nothing. You'll need to use the rgba() function to define the color. The ending 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 , 1 ));
-
7
Review your completed code. The code to create a color gradient as your website's background will look something like this:
<! DOCTYPE html > < html > < head > < style > html { min-height : 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 ); background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
Advertisement
-
1
Find your document's "html" header. It should be near the top of the document.
-
2
Add the animation property to the "body" element. Type the following into the space below the "body {" bracket and above the closing bracket:[5]
- The top 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 use the @keyframes rule to set the background colors through which you'll cycle, as well as the length of time each color will appear on the page. Again, you'll need separate entries for the different sets of browsers. Enter the following lines of code below the closed "body" bracket:[6]
- Note that the two rules (@-webkit-keyframes and @keyframes have the same background colors and percentages. You'll want these to stay uniform 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). Once the animation has played for 25% of of 60 seconds, the background will turn to #7821F, and so on.
- You can modify the times and colors to fit your desired outcome.
@ -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 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} }
-
4
Review your code. Your entire code for the changing background color should resemble the following:
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 s infinite ; animation : colorchange 60 s infinite ; } @ -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 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } </ style > </ head > < body > </ body > </ html >
Advertisement
Add New Question
-
Question
How do I set a background color for a specific width?
Use the background-size property inside of the "body" element. For example, "background-size: 300px 150px" makes the background 300 pixels wide and 150 pixels high.
-
Question
It does not work. What can I do?
UsernameHere11
Community Answer
To make it black, try: body { background-color: #190707}
-
Question
What is the correct HTML for adding a background color?
My text goes here! Replace the html code 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 around the text to be underlined, like so: {{kbd|My Heading}}
-
Question
How do I change the background color in my e-mail account?
Go to Settings (not account settings), then press "Themes" or "Change Background".
-
Question
How do I apply more than 2 colors on my website?
Use the gradient function provided above and put the 2 different 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 responsive padded background of slightly darker colour behind just text column?
You are talking about a double border page. Look in Google for double border templates. Some come with the coding to make it, then all you need to do is put in the filename of your images.
-
Question
How do I change just a small section of the background to a specific color?
You'd have to specify the section, first. Usually that's done in external css, or in-line css.
-
Question
How can I add CSS to my simple html web design? Do I have to open another notepad or join the styling to my HTML?
If you want 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 page, or just certain styling, you'd put the CSS in the coding.
-
Question
Should I put this under the images in my HTML website?
Make a folder called images. Put all images used on your website (for the page itself) into that folder. But let's say you have pages about Canada and images specific to that country. You could make a separate folder called images-ca . Helps to be organized.
Show 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 want to use basic colors within your HTML code, you 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-color: orange;here.
Advertisement
-
Make sure you test any changes to your website before publishing them online.
Advertisement
About This Article
Article Summary X
1. Open the file.
2. Find or insert the <style> </style> tags.
3. Add the body element.
4. Add the background-color property.
5. Insert the color code followed by a semicolon.
Did this summary help you?
Thanks to all authors for creating a page that has been read 1,455,302 times.
Is this article up to date?
rutherfordtraturd.blogspot.com
Source: https://www.wikihow.com/Set-Background-Color-in-HTML
0 Response to "Given the Code Set Your Background Colors to Blue"
Post a Comment