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>
Related
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;
}
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.
Following is my CSS and HTML file.`
.backgroundimage{
backgroud:url('C:\Users\shvikram\Desktop\Social_Media\Images\login_page.jpg');
background-attachment:fixed;
}
<html>
<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
<link rel="stylesheet" type="text/css" href="CSS\main.css">
<title>Social Media</title>
<body>
<div class="backgroundimage">Hello World</div>
</body>
</html>
The Directory Structure is as follows.
Social_Media directory contains Images, CSS and index.html file.
I tried using following notation also, but it is not working.
.backgroundimage {
background-image: url('\Images\login_page.jpg');
background-repeat: no-repeat;
}
It's only a problem with the image path. It should be relative to your HTML file:
<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
<link rel="stylesheet" type="text/css" href="CSS\main.css">
<title>Social Media</title>
<body>
<div class="backgroundimage">Hello World</div>
</body>
CSS:
.backgroundimage {
background-image: url('http://via.placeholder.com/350x150');
background-repeat: no-repeat;
height: 300px;
}
Read about it here:
How to give the background-image path in CSS?
As first, your stylesheet link and title are not withing the head tag.
As second, the links inside your stylesheet are relative to CSS file (not to the file where the stylesheet was included), so it should be:
.backgroundimage{
backgroud: url('../Images/login_page.jpg'); /* In parent folder, Images */
background-attachment: fixed;
}
As third, do not use backslashes for file paths, no matter you are on Windows OS.
As fourth, go on and use your browser inspector, to be sure all resources are loaded, than to track errors etc.
Final HTML should look like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="Images/Logo.ico" />
<link rel="stylesheet" type="text/css" href="CSS/main.css" />
<title>Social Media</title>
</head>
<body>
<div class="backgroundimage">Hello World</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>
Currently I have the below HTML code, as you can see there is no doctype specified:
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
</head>
<body>
<div class="container">
<div id="searchbar">
<form action="#" method="POST">
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text" />
<button class="btn" type="button">Go!</button>
</div>
</form>
</div>
</div>
</body>
</html>
Mixed with the following style.css file:
#font-face{
font-family: Comfortaa;
src: url('Comfortaa.ttf');
}
body{
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
Having that code shows my background image just fine however when I add the <!DOCTYPE html> as is required by bootstrap, my background image declaration seems to be "ignored" and only the specified background color is shown.
I have done some testing and found that background-position is causing the issue.
With background-position: center bottom the image will not appear however background-image: center and it will appear but centered at the top of the page and I need it at the bottom.
How can I push down that background image?
Add
html,body{min-height:100%}
to your CSS.
As for the doctype, use this
<!DOCTYPE HTML>
so your document will look somewhat like this working example. Try it and you'll see the image is displayed just the way you want it to be displayed.
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<meta charset="utf-8">
<style>
html{
min-height:100%;
}
body{
min-height:100%;
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
</style>
</head>
<body>
<p id="searchbar">Just testing!</p>
</body>
</html>
Enjoy!
You should always use a doctype, otherwise you will be developing in the scary and unpredictable land called quirksmode, this is nothing you want. I suggest you add:
<!DOCTYPE html>
and try to fix your minor CSS issues with that in place.