I'm familiar with html/css, but while experimenting with background-image:url(), nothing shows up. My html is very basic to test this out; my image path name is correct. I've exhausted all my resources and nothing is working.
Here is my html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<img class="pic">
</body>
</html>
CSS:
.pic {
background-image: url(/Users/leslienguyen/Desktop/bgBullet4.png);
background-size: cover;
}
I've already tried using (-webkit-)background-size, background-attachment, and checked if the files are all in the same location. The background sometimes works when I put height specific px but never works with auto either. I'm super stuck.
Thanks!
You must have a width height for your pic. I used a random image below for the purposes of running the code.
.pic {
width:100%;
height:100vh;
background-image: url('https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg');
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<img class="pic">
</body>
</html>
you are trying to add a background image to an image tag <img /> ! this is not how the img tag works
You can insert an image by using the src attribute
<img src='/Users/leslienguyen/Desktop/bgBullet4.png' />
Or set the background to your body by simply moving the class='pic' to the body tag
<body class='pic'>
</body>
Try to add '' '' before and after your url adress.
Try inserting your PNG File into Imgur, and then embedding the imgur link into the code, so do
.pic {
background-image: url((IMGUR URL.png);
background-size: cover;
}
Related
I do not understand WHAT I am doing wrong. I'm new to this and just trying to follow this online course...
So I have my HTML file and all I'm trying to do is shove my tiny bit of CSS into a separate .css file.
When I use < link rel="stylesheet" href="./Documents/Untitled1.css > in the head tag of my HTML file, referring to my CSS code that just states a basic CSS, the background does not change...
HOWEVER, if I use the style tag inside my head tag... it works JUST fine using my CSS code.
body {
background-image: url("./images/rain.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Please someone tell me what I'm doing wrong...
<style>
body{
background-image: url('https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
<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="stack.css">
</head>
<body>
</body>
I think your CSS href path I guess !! not sure you can check the above code
Name your styles file "style.css", put style.css to the same folder where you have your *.html file and inside html file paste this line:
<link rel="stylesheet" type="text/css" href="./style.css" />
Your issue is caused by wrong path to css
you have a whitespace character between tag opening and the link keyword
< link rel="stylesheet"...
should be
<link rel="stylesheet"...
also - do you really have your css in Documents folder?
I know what's wrong here, I have faced this issue so many times. The background image doesn't show up because you haven't set a height to it.
body {
height: 100%
}
This will do the work.
Reference
is your HTML and CSS in the same folder?
If yes then just use
<link rel="stylesheet" href="Untitled1.css">
I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>
Your div is of 0 height - background-image doesn't give it any height.
I am creating a test website with Angular, just to learn some things. First I put everything into the index.html, and this is the look I came up with:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
I then copied this html code and entered it into the app.component.html. Back in the index.html, I changed
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
to
<body>
<app-root></app-root>
</body>
But then my Site started to look like this:
Where did I make the error? My app.component.css is empty, so there is nothing able to change the look of that background. I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill. When I put this into the app.component.css:
body {
position: absolute;
}
,then i get this:
I'm just a starter in html/css, but all the tutorials about background images changed nothing for me
Looks like you have two body tags, according to your answer ofc :)
One here (index.html) and second in app.component.html:
<body>
<app-root></app-root>
</body>
You can probably keep body into app.component.html, but you should remove it from index.html. And apply display: block; height: 100% for app-root, I suppose.
Any ideas why this CSS code doesn't work when I put it inside main.css file?
I'm trying to make fullscreen background.
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<style>
.bg {
background-image: url("nuotraukos/bg.png");
min-height:100%;
min-width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Nothing seems to be wrong with your <link>.
Check if the file really exists and if the html page is in the same directory as the CSS folder. Otherwise the file path is wrong.
If the image is not displaying, it's probably because it's not in the same path as the .css, so you should change the link too.
Let's suppose your image is one folder up the css file. Then you should change the url to this:
url("../nuotraukos/bg.png");
Also it's not a good practice to use a div to set a background, so instead of using a div to set a background, set a background to the <body> and stretch it.
body {
background-image: url("http://images.alphacoders.com/538/53823.jpg");
background-size:cover;
}
<head>
</head>
<body>
</body>
Maybe it would help if you change the path when you place main.css in the CSS folder?
background-image: url("../nuotraukos/bg.png");
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width intial-scale=1.0"/>
<meta https-equiv="X-UA-Compatible" content="ie-edge"/>
<title>First Website</title>
<link rel="style-sheet" href="css/reset.css"
<link rel="style-sheet" href="css/main.css"
</head>
<body>
<div id="Home">
<div class="box"></div>
<div class="background-image">
<div class="content-area">
<div class="user-image">
<div class="circle">
</div>
</div>
</div>
</body>
</html>
HTML:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Hello World!</h1>
<h2>A few facts about the world we live in</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" />
</body>
</html>
CSS:
img {
width: 300;
}
h1 {
font-family: Georgia;
background-color: red;
}
I have saved my html and css in the same folder. My css file is named as stylesheet.css.
I am able to edit but not through my css file which means my css file and html are linked but I somehow can't seem to edit images. Somebody help me!
the issue is your units. 300 of what? You need to add a % or px or em.
img{
width:300px;
}
Fiddle with 300px
https://jsfiddle.net/jL7Lqfv8/
Are you sure your CSS is being pulled in? Check your network tab in your browser to ensure it is. Also, try giving some units to the image width:
img {
width: 300px;
}