I am new to HTML and CSS. I'm wanting to add an image to the background of my page but I do not know how to do that.
I am wanting to keep the CSS internal to the page, so that this background image is specified by the CSS in the <head> of my page:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can set an image for the background of your page via the background-image CSS property. Here, a background image is specified via a URL and applied to the body element of the document:
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
Here is a complete example with your existing HTML:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can use background attribute ,
<body background="bgimage.jpg">
Using CSS,
body
{
background-image: url("bgimage.jpg");
}
You can also use background shorthand property as well which allows you to set different background properties which includes background-image as well,
body {
background: lightblue url("bgimage.jpg") no-repeat fixed center;
}
Related
ok, so I got an assignment to make a 3 page website using css and html, and we have to use external style sheets, naturally I want to make my stuff look nice, HOWEVER we are only aloud to use our one external sheet, so I was wondering if and or how I would be able to call upon different images to set them as backgrounds, because right now I only have my one background image, and I would like to be able to call upon a different image and set it to the background for each of the 3 pages
-here is my style sheet I can also provide my html page though it is very bear bones and just references stuff from the style sheet, just let me know :)
body {
font-family: Arial, Helvetica, sans-serif;
font: sans-serif;
background-image: url(back1.PNG);
background-attachment: fixed;
background-color: #403f42;
}
h1 {
text-align: center;
color: #0a0068;
padding: 10px;
border-color: #0a0068;
border-style: ridge;
border-width: 10px;
margin: 1in;
background-color: #5184d133;
font-size: 50px;
}
h2 {
text-align: center;
background-color: #59696e71;
padding: 10px;
color: #0a0068;
border-color: #473e93;
border-style: solid;
border-width: 5px;
margin: .25in;
font-size: 40px;
}
h3 {
text-align: center;
color: #007517;
background-color: #62e47c5f;
border-color: rgb(10, 151, 10);
border-style: dashed;
padding: 10px;
border-width: 5px;
font-size: 40px;
margin: 2in;
}
h4 {
text-align: center;
color: #0092b0;
background-color: #62e2ff5f;
border-color: rgb(0, 217, 255);
border-style: double;
padding: 10px;
border-width: 5px;
font-size: 40px;
margin: 2in;
}
h5 {
text-align: center;
color: #580707;
background-color: #5c15155f;
border-color: #580707;
border-style: outset;
padding: 10px;
border-width: 5px;
font-size: 40px;
margin: 2in;
}
a:link {
color: #bf00ff;
}
a:visited {
color: #6d04a652;
}
a:hover {
color: rgb(42, 1, 80);
}
h6 {
font-family: Arial, Helvetica, sans-serif;
font: sans-serif;
background-image: url(armor.png);
background-attachment: fixed;
background-color: #403f42;
}
}
<html>
<link rel="stylesheet" href="style.css">
<head>
</head>
<body>
<h1>
<p>How to beat the ender dragon in Minecraft</p>
</h1>
<h2>
<p>This will be a simple step by step guide for defeating the ender dragon!</p>
<p>and yes, there will be pictures !</p>
</h2>
</body>
<h3>
Finding the End portal
</h3>
<h4>
Gearing Up
</h4>
<h5>
Combat
</h5>
</html>
the website had to use a theme or a tutorial of some kind... that it is why it is a guide on minecraft
I figured it out !
I had to id my bodies
so instead of just having
body in my external file
I needed to have another body in my css file
so in my html I had to do
<body id="body2" class="body2">
and in the css file
body.body2 {
font-family: Arial, Helvetica, sans-serif;
font: sans-serif;
background-image: url(end.PNG);
background-attachment: fixed;
background-color: #403f42;
}
all that it needed was identification,
Something cool you can do is use CSS variables to manage your backgrounds a little easier. It doesn't solve your problem, but it seems like you've got it already.
:root {
--background-1: (bck1.png);
--background-2: (bck2.png);
--background-3: (bck3.png);
}
#body1 {
background: var(--background-1);
}
#body2 {
background: var(--background-2);
}
#body3 {
background: var(--background-3);
}
My background is interrupted by the list and by the h3 but it has to be one solid line. The yellow thing is a background image. Pleas need help. Is for a school project.
In the image you see a yellow driangle dis ist the interrupted image:
This is my code:
* {
background-image: url("https://placehold.it/300x300/");
background-repeat: no-repeat;
background-color: #252525;
color: white;
font-family: arial;
}
h1 {
text-align: center;
font-size: 42pt;
background-image: url("https://placehold.it/300x300/f00/fff");
text-transform: uppercase;
}
h3 {
text-align: center;
font-size: 28pt;
text-transform: uppercase;
}
li {
list-style-type: none;
margin-top: 20px;
margin-bottom: 20px;
}
a {
color: yellow;
list-style-type: none;
width: 120px;
text-align: center;
font-size: 18pt;
box-shadow: 3px 3px 3px black;
font-weight: bold;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jonas Ploberger">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Übersicht jonas Ploberger</title>
<link rel="stylesheet" href="startseite.css">
</head>
<body>
<h1>PlobergerJonas</h1>
<h3>Home</h3>
<ul>
<li>Home</li>
<li>PS Bilder</li>
<li>Ausbildung</li>
<li>Kontakt</li>
</ul>
</body>
</html>
Here:
* {
background-image: url("https://placehold.it/300x300/");
background-repeat: no-repeat;
background-color: #252525;
color: white;
font-family: arial;
}
you are using the universal selector '*' and so you are setting a background image to every element in your html document.
So you want to replace that selector with either 'body' or any other element you want to have that background image on.
I created a simple network of HTML pages styled with SCSS but the SCSS rules aren't being applied!
Heres how my SCSS file looks like:
//SCSS variables
$Heading-size: 60px;
$Mobile-Heading-size: 40px;
$Mobile-Body-Size: 30px;
$Defualt-background: rgba(149, 149, 243, 0.616);
//SCSS Inheritance and .class selector
.nav{
#extend h1;
}
img{
width: 250px;
}
body {
color: black;
background-color: $Defualt-background;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
//SCSS Nesting
h1 {
text-align: center;
size: $Heading-size;
color: tomato;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: $Defualt-background;
}
}
table {
border-radius: 5px;
border-width: 5px;
th {
border-width: 4px;
}
td {
border-width: 2px;
}
}
//responsive #media query
#media only screen and (max-width: 768px){
h1 {
size: $Mobile-Heading-size;
}
body {
//The background is a test to see if it works :)
$Defualt-background: orange;
background-color: $Defualt-background;
size: $Mobile-Body-Size
}
}
And this is how I linked it to my html:
<link rel="stylesheet" href="./CSS/style.css">
Just to be clear im linking the CSS generated by my compiler not the original SCSS!
I would like to set an overlay on my site:
When I play around with the color in the inspect window, I can make it work in the element style like this:
element.style {
background-color: rgba(0,0,0,0.4);
}
I tried to add the line background-color: rgba(0,0,0,0.4); , in my body css, but it is not working. Should it not be on the body element?
<html>
<head>
</head>
<body>
</body>
</html>
body {
background-color: rgba(0,0,0,0.4);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
letter-spacing: -0.01em;
overflow-x: hidden;
position: relative;
}
If you're talking about overlaying color on your bg img then the rgba needs to be in the same css block as the img
body {
background-image: bgimg.jpg;
background-color: rgba(0,0,0,0.4);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
letter-spacing: -0.01em;
overflow-x: hidden;
position: relative;
}
I have a site using 2 css : one global, one page specific.
By default, I want to set a font type and size for everything, and adjust it depending on my needs on some pages.
So I have :
global.css
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
p {
text-align:justify;
margin:0px;
margin-bottom:10px;
}
a:link {
color: #993300;
text-decoration: none;
}
a:visited {
color:#993300;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline overline;
}
news.css
div.news{
width: 100%;
}
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #848484;
margin:0px;
margin-bottom:20px;
text-align: center;
position: relative;
top: -10px;
text-transform: uppercase;
}
.news p.reminder a:link, .news p.reminder a:visited {
color: #848484;
}
.news p.reminder a:hover {
}
HTML file
<HTML>
<HEAD>
<TITLE>the title</TITLE>
<LINK href="global.css" rel="stylesheet" type="text/css">
<LINK href="news.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV class="news">
<P class="reminder">
some text
</P>
</DIV>
</BODY>
</HTML>
For a reason I don't see, the part :
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
is not taken into account.
If I remove the * definition from the global.css, it's OK. But if I keep it, that part does not override it.
How may I do to make this work ?
The reason you don't see it is because, while the paragraph does take on the styles you want, the * selector matches <A href="some_url"> and promptly changes them back.
You could modify the selector to match the a element too, but I'd set the font styling on the body instead of *