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">
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 trying to learn HTML and CSS. I have tried using my CSS but it doesn't seem to be working properly.
HTML:
<head>
<link rel="stylesheet" type="text/css" src="styling.css">
<script src="../(public)/js/js.js"></script>
<meta charset="utf-8" />
<title>MyPortfolio</title>
</head>
CSS:
body
{
background : (red);
}
<link rel="stylesheet" href="./styling.css">
The folder directory of your CSS file determines how you link it.
Its best practice to link your script at the end of your web page, before the end of the body tag.
Its not "src", its "href".
<link rel="stylesheet" href="style.css">
I suggest you put that script tag on the bottom of your page.
Oh and one last thing, that css is incorrect. Here's what you should use:
body{
background:red; /* Or #ff0000 */
}
I start a Angular App and it works fine but it doesn't appl the stylesheet style.css in the same fooder with index.html (src). Any idea why?
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="stylesheet" href="style.css">
</head>
<body>
<i></app-root>
</body>
</html>
style.css
/* You can add global styles to this file, and also import other style files */
body {
background-color: black;
color: white;
}
The background stays white and the letters black until I add the style in the head of the index.html file.
In angular, any asset you add you need to add its reference in angular.json file also. You will find "styles": [ ] in angular.json. You can add your stylesheet reference there.
to fix this change the type='text/css' to type='stylesheet'
type equal to stylesheet stands for css files, import for any source.
text/css is commonly used for use head declarations, as you say.
For me it works if I import it in a CSS file instead. E.g.
#import '#angular/material/prebuilt-themes/indigo-pink.css';
I'm new to asp.net MVC and I need to have a full background image on the login page. Im getting confused with all of the cshtmls and getting lost on where to set the full background image. Help please..
I think that best solutions is to do that via style sheets (css). All styles should be in a separate css file. For beautiful code don't use in-line styling:
body {
background-image: url('your_img_path');
margin: 0;
}
Firstly I would say, treat '.cshtml' just like '.html' for all designing purposes.
To add background image in a view (.cshtml page in Asp.net MVC), you simply need to add it in < body > tag as 'background' attribute.
I have provided the sample code. Have a Look.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>
</head>
<body background="~/Content/Images/sahb.png">
</body>
</html>
Regards!
SAHB
In case if you want change background in a particular View just add thise code
#section head{
<style type="text/css">
body {
background-image: url('/Images/paper.jpg');
margin: 0;
}
</style>
}
But dont forget in Layout of this View add following line
<head>
#RenderSection("head", required: false)
</head>
If you want it on all pages use Shared/_Layout.cshtml file
and change body tag similar to
Probably I would put only on the Home/Index.cshtml page so it appears only on the home page
To avoid that repeated across other pages I would add an ID to home page in the Shared/Index.chtml file as follows
<body id="HomepageBody" >
and change it in the Content/site.css file add
#HomepageBody { background-image: url("/images/7flowers.jpg" );
background-repeat:no-repeat; background-position:center; }
That would make it work across popular browsers like Chrome.
if you wanna use background-image: url('');
just do not use ~ symbol
use this code in cshtml page to insert background image on entire screen of your div section
<div style="background-image: url('/Areas/Admin/Content/Image/OIP7.jpg'); background-repeat:no-repeat; background-size:100% 100%">
one more thing ~ is not working in Url. start your image address with forward slash
/ link this '/Areas/Admin/Content/Image/OIP7.jpg'
In Index.cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/CSS/Main.css" />
</head>
<body
</body>
</html>
in Main.css:
body {
background-image: url(../Images/myBackgroundPictureName.png);
background-repeat:no-repeat;
background-size:cover;
}
It is very simple just use a css property background image on that div or that section you want.
<div style="background-image: url('/Content/images/image_2.jpg');"></div>
If your image is not displaying, you may have to add ~ tilde sign to the URL
Example :
<div style="background-image: url('~/Content/images/image_2.jpg');"></div>
I have this very strange problem.
I'm trying to code with Bootstrap 3. in the <head> I declare links for CSS to be used. Although the HTML completely ignores my third link.
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/custom.css" rel"stylesheet">
</head>
As you can see, the third link refering to css/custom.css is there correctly. But on the website it's being completely ignored.
I have tried coding a simple button using
<button type="button" class="btn btn-primary">Default</button>
And in custom.css I have the .btn class
.btn{
border-radius: 0px;
}
So the button's border should be straight not rounded like it is in bootstrap3. Problem is that my custom.css doesn't want to work and it's just completely ignored.
Can anyone please help me with this?
Thank you.
Patryk.
Add '=' after 'REL'.
Your code:
<link href="css/custom.css" rel"stylesheet">
Should be:
<link href="css/custom.css" rel="stylesheet">
If custom.css is correctly loaded than bootstrap code has a higher precedence, so you might want to use button.btn.btn-primary{border-radius: 0px;} or .btn.btn-primary{border-radius: 0px!important;}
As #Damian says it, the custom.css file is not loaded at all.