I am creating mvc4 application. I want to set background in layout.cshtml. Issue is that my background image is repeating even after setting a tag of background-repeat:no-repeat. I Google it a lot and tried different approaches told there. But none of them helped me out. Any help in this regard? My background image is paced in the Images folder created in my app. Here is the simple code of my layout.cshtml file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="bootstrap.js"></script>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
You error is in the line:
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
in which you're using too many ".
You need to use semi-colons instead to differentiate between one style and the next. So instead, make it:
<body style="background-image:url(Images/blue.jpg); background-repeat:no-repeat">
for it to work.
Side Note
Styling inline is generally avoided, as it leads to multiple problems from a css point of view. Try setting this inside your css file instead.
Your css would then include:
body{
background:url(Images/blue.jpg);
background-repeat: no-repeat;
background-size:100%; /*if you wanted to 'fill' the page to max size without cropping*/
}
DEMO
To completely 'fill' the page, you need to add a size to your html as well,
DEMO
Give inline style as follows:
<body style="background-image:url(Images/blue.jpg);background-repeat:no-repeat;">
The problem is to, you need to put the single quotations between inside the url also you missed one forward slash as well.
<body style="background-image:url('/Images/blue.jpg'); background-repeat:no-repeat;">
Related
I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.
HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
This was asked before, but it wasn't clear what the solution was, so I'm asking now. I have written an HTML5 page that is not only showing the element in the bar (as, of course, it should) but also in the first line of the web page. WTH? I have never encountered this problem before and it's completely baffling. What have I done wrong? Any help would be appreciated. My code is below and I've stripped it down to the bare minimum so as to pinpoint the issue.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MBSeacott.com</title>
<link rel="stylesheet" href="css/fullscreenimg.css" type="text/css" />
<link rel="stylesheet" href="css/mainstyle.css" type="text/css" />
</head>
<body></body>
</html>
Thanks in advance,
MB
Maybe you have set display:block for the title element? E.g., with * {display:block;} (resp. something other than none).
If so, then you could overwrite it, e.g., with title {display:none;}. Or, to make sure that no other childs of the head element may appear in the future: head {display:none;}.
use:
body * {}
instead of
* {}
I have this code in html and css. the problem is that the background image doesn't show up. first I thought the problem is with the size of the image and I made it smaller. but it made no change. can anyone help spotting the problem?
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<style>
{background-image:url('background.png');}
</style>
</head>
<title>
Melika Barzegaran Hosseini - Home Page
</title>
</html>
Maybe change your CSS to:
body{background-image:url('background.png');}
At present you have no CSS selector in place to identify exactly 'what' to apply the background image to.
Failing that, ensure that the image is actually found at the location specified.
I have added
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css/" />
in the index.html above tag. But my stylesheet is not working. my style.css code is:
body
{
background-color: #23314F;
}
main
{
margin: 0 auto;
width: 880px;
background: #FAFAFA;
}
What changes should be made?
The link provided is incorrect
href="http://blogsoc.org/mail1/style.css/
must be
href="http://blogsoc.org/mail1/style.css
without last /
Not too much discriptiv question.
But try removing last slash.
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css" />
"Not working" is a very vague description of the problem.
The only obvious issue is that main will select <main> elements which do not exist in HTML. We can't tell you what to change it to because can't see your HTML. I recommend reading selectutorial.
Since the question has been updated:
http://blogsoc.org/mail1/style.css/ gives me a 404 error. You need to provide a working URI to your stylesheet. http://blogsoc.org/mail1/style.css appears to be what you want.
I had that problem before. And I solved it. The problem was that I originally declared my page as a <frameset> in Eclipse. Even when I changed it, the problem persisted. I copy and pasted the page and tested in different browsers.
The source page was linking to the stylesheet on the browser perfectly. It was just not showing the style on my page.
I created a new page with no declaration and it works.
The `<link>` tag was not the problem.
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Test Title</h1>
this is a test page.
</body>
</html>