css
#part1 {
background: url("img/00.jpg") repeat 0 0;
}
#part1 {
background: url("../img/00.jpg") repeat 0 0;
}
#part1 {
background-image: url("../img/00.jpg") repeat 0 0;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello there</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<div id="part1">hello there</div>
<footer></footer>
</body>
</html>
but still the background image doesnt display ...except a white background.Can anyone help....I stored the image in a folder named img
In your code example you are targetting the same element with 3 different CSS rules. Because of this, only the last rule will be applied, as it will override the other 2.
Make sure that you are defining the correct path to the image based on your file structure.
#part1 {
background: url("http://patcreator.appspot.com/imgs/textures/light/light-texture-01.jpg") repeat 0 0;
}
<div id="part1">hello there</div>
To see the background your should have at least width:100px; and height:100px; try this
#part1{
background: url("img/00.jpg") repeat 0 0;
min-height:100px;
}
Also check browser console if image not found !
Related
I'm a total beginner at coding and my first problem I can't figure out is that when I use CSS sheet as a change of h1 and h3 color it basically doesn't change.
I tried to set a <h1> text color in CSS sheet and it didn't change.
body {
background-color: #EEEEEE;
}
h1 {
color: blue;
}
h3 {
color: blue;
}
hr {
border-color: grey;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
<h1>H1</h1>
<hr/>
<h3>H3</h3>
That's my HTML code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kacper's Personal Site 💲</title>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<table>
for background color it works properly.
If you have created a separate file of CSS then link your CSS file to an HTML file like <head><link rel="stylesheet" href="style.css"></head>,see here https://www.freecodecamp.org/news/how-to-link-css-to-html/
When you use a separate CSS file, you need to link that CSS file to the html document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>H1</h1>
<hr/>
<h3>H3</h3>
</body>
</html>
Just deleted all the code to be easier to solve it maybe. The body background color is only applied to the elements but not the entire page.
body {
margin: 0;
background: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>mdada</h1>
</body>
</html>
Add body height or min-height
body {
margin: 0;
min-height:100vh;
background: blueviolet;
}
<body>
<h1>mdada</h1>
</body>
Would anyone know why css is not working in my html? It is linked to my html, but not working. It is also showing empty in chrome inspect - css tab. I see that css is linking , but not sure why it is not working.. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quierra Marriott</title>
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px
font-family: 'Roboto', sans-serif;
color: #eee;``
}
body {
width: 100%;
height: 100%;
background: url() no-repeat center fixed;
background-size: cover;
}
Your css is invalid:
html {
font-size: 10px /* You're missing a semi-colon here*/
color: #eee;`` /* You don't need the strings `` here...*/
...
It may be of interest to you to find a tool like w3c css validator: https://jigsaw.w3.org/css-validator/.
Missing semicolon and empty string are problem but they are only affecting font-size property of html selector.
If your intention was to add background to body then you should fill image url
body {
width: 100%;
height: 100%;
background: url('http://image-url.com/image') no-repeat center fixed;
background-size: cover;
}
These is main reason for empty page
Didn't see any 'body' tag in your HTML that's why I think it's not working
How can I make the input element completely transparent so that it has the body background image and not the background colour of its parent?
HTML code:
body{
background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
}
#wrapper{
background-color: white;
height: 100px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Add css as follows:
#wrapper > input {
background-color: transparent;
border: none;
}
If you want to remove the border on focus too, then add:
#wrapper > input:focus {
outline:none;
}
You can do it this way :
#wrapper{
background-color: white;
height: 100px;
}
#wrapper > input
{
background-color: transparent;
border: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Similar answer was posted few years ago : set input transparent
As I understand you are trying to prevent child element from inheriting parent's background color.
The only way to do is overriding the style
I don't know if this works for you but you can do:
input{
background-image:url("image.jpg");
border: none;
}
you can also do whatever part of the background image you want to display instead input field, simply cut that part of the image and set as a background image for the input field.
The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT: