Change background color of specific section - html

I have an HTML home page and what I would like to change a section of a page to a different color, the issue i am facing is that i want the color to the entire page. Here is an example of what i want to achieve:
The code I tried here doesn't seem to change the entire page background color for the div tag
body {
background-color: coral;
}
<h1>The background-color Property</h1>
<div style="background-color:lightblue">
<p>The background color can be specified with a color name.</p>
</div>

First of all, your question is not clear, sorry. There is no such thing as "the entire page background color for the div tag".
I can take a guess though, and assume you mean that the background area for the div should be as wide as the viewport, i.e. extend into the margin of the page. In that case, the solution is as follows.
body {
background-color: coral;
}
/* This could be done inline, but using a class will be more efficient if there
are more of these divs on the screen */
div.highlight {
background-color:lightblue;
margin:0 -8px; padding:0 8px;
}
<h1>The background-color Property</h1>
<div class="highlight">
<p>The background color can be specified with a color name.</p>
</div>

that is very simple
you can put your element in a section with a specific id like this:
<section id='naturePart' >
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
and then write css for this section in one of external , inline or internal way like this.
external way :
create a file like style.css and link it in your html page
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
write this code in your style.css :
#naturePart{
background-color: lightblue;
}
in inline way :
<section id='naturePart' style="background-color: lightblue">
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
pay attention that use must use one of this way and inline way has upper periority.
if you use html4 or latest version you can use div insted of section.
best regard

Related

HTML and CSS Background change

I require some help. My friend sent me an HTML document and he asked me to change the background. Now I'm new to HTML and all this but changing the background should be easy but I can't find it anywhere in the HTML doc or the CSS. Any help?
Just create a new css for example for body like this if you want it to be black:
body {
background: #000000;
}
That should work.
div{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/tulips.png");
height:100px;
}
<div></div>
You can change the background by using background-color or background-image as follows:
<div style="background-color: red" >
This div has a background-color of red
</div>
The HTML file contains 2 main sections - <head>, <body>.
Head specifies attributes like page title, language, links to stylesheets (css / designs).
'Background' can be applied to any part within the <body> section of the HTML file (including body).
Background can be applied in 2 ways -
A colour - Using style="background-color: color-code;"
An image - Using style="background-image: url('img_girl.jpg')"
Here is an example of background being applied:
Approach 1: Background colour:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-color: #e6f2ff;">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Approach 2: Background image:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-image: url("/paper.gif");">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Note:
The background color / image can be applied to any element inside body, I.E., to div / h1 / p ...
More information:
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/html/html_images_background.asp
Add a style for header in your CSS file :
.header {
background: "#000000"
}
The background image can be inserted in the page using the below within body tag or by using CSS: < div style="background-image:url('[image url]');>
Also, this website contain good information to go through : https://www.wikihow.com/Set-a-Background-Image-in-HTML

Add CSS directly into HTML on a template webpage

I have a webpage that is a template from a company that design it for us and we have an admin panel which we can add content to the page.
This normally works fine but there is a specific page that doesn't look great. It has a lot of text on it and we want the background to be a dark brown colour, a gold border around it and the text in bold.
When we are adding content we create a content block and in this, we can add html, I have recently done a very basic course in html. I know normally the page will link to a CSS file which will provide the page style. But I also know you can add the <style> tag in and then add CSS directly into the HTML.
This is maybe a long shot but does anyone with any knowledge of template website know if it would work to add the css in this way just to change the background colour and give it a border? I presume I would need to use something like google dev tools to find out what the section names are to identify them in the CSS? According to dev tools the section I want to modify looks like this.
<div id="content">
<div class="cs-content-row">
Thanks
If you have very limited control, e.g. you can't add a <style> tag to the <head> or use a custom stylesheet, you can also resort to using inline style, and style individual elements using the style attribute.
See example of use;
<div style="background:brown; border:1px solid yellow; color:white; font-weight:bold; padding:30px;">Your text here</div>
The pros are it overrides the default styling easily, but the downside is you have to re-write code for every element you want to custom style, and if you changed your mind about the colour, you'll have to edit every instance it was used..
You mean normal css into html like this?
<html lang="en">
<head>
<style>
body{
background:red;
}
#content{
width:200px;
height:200px;
background:blue;
}
.cs-content-row{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="content">
<div class="cs-content-row">
</body>
</html>
You can use the style tag but you have to add it between the <head> tags of your page.
If your admin panel allows you to update that part of HTML you can do something like that :
According to your HTML description
<head>
<style>
#content{
/* css targeting the div with id attribute equals to 'content' */
}
.cs-content-row{
/* css targeting the div with class attribute equals to 'cs-content-row' */
}
</style>
</head>

Use CSS to replace the content of elements based on the content of another

I'm trying to write some CSS that might take the page title (defined by a h1 element's content) and stick that content into every element with the class "DocTitle". I'm limited to using CSS and HTML.
Suggestions?
<head>
<style>
.DocTitle {
content: element(runningheader);
.pagetitle h1 {
position: running(runningheader);
}
</style>
</head>
<body>
<div class="DocTitle"></div>
<h1 class="pagetitle">This is the page title</h1>
<span class="DocTitle">This should be replaced</span>
</body>
Based on research, I would have thought this might have worked, but I think it only works if you use page at-rules, and I don't think I can apply content to a class in an at-rule. I'm not 100% on that though, because I'm not really sure what I can and cannot do in an at-rule. For reference, this is for use in generating print media.

Auto adjust my background image size

I've been googling for awhile and none of the answers seem to match my need, need someone to help me with this, thanks.
my personal website is: http://simonykhsu.com for refrences
my code for the background image is
<div class="landing-header" style="background-image: url('skitrip_owlshead.jpg');">
i've tried implementing this background image code but i cant find the section in css file to make the background go skin color
<div id="image-container">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
and also the second code above doesnt seem to bring my image to the middle...
for centering the image and set backgroud color you can do this in the image-container div
<div id="image-container" style="text-align:center; background-color:#ccc;">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
#ccc is a sample color ... you set with your color code..
I'm sorry, but I don't really understand what it is that you're trying to accomplish.
Couple of heads-ups tho:
its better to create a seperate CSS file, instead of using inline-styling. Make a file called style.css and put your CSS in that. Put this in the <head> section of your website:
<link rel="stylesheet" href="style.css" type="text/css">
The alt="middle" is the alt-text. It's not used for styling
(centering) your image, but to describe your image. Something like
"skiteam owlshead team" should be good.
If you want to center the image and put 'skin color' right and left to it, put this in your style.css:
#image-container {
background-color: #FFFCF5;
}
#image-container img {
text-align:center;
}

HTML div with a background

I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags