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.
Related
<head>
<link rel="icon" href="c.ico"/>
<title>A title</title>
</head>
This will add an icon to the left of the title up in the title bar.
Can I add another?
Or change the positon of the icon to display to the right of the text?
<head>
<title>A title</title>
<link rel="icon" href="c.ico"/>
<link rel="icon" href="c.ico"/>
</head>
The above changes nothing, and I haven't found any answer for this, probably because nobody does this and this may be useless.
But I was still wondering.
Using CSS with this (like float:right or border-radius) didn't work at all and I couldn't find any thing useful in the reference for link.
The favicon is not actually part of the web page, it is just an image that the browser use to display your page title more friendly. How the image is displayed is up to the browser.
I named my css file newstyle.css
Any change that I make to the css style sheet in sublime text won't show up when I look at the webpage.
How can I make sure my link works?
<!DOCTYPE html>
<html>
<head>
<title>Ana Yasmeen </title>
<link href="css/newstyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
Your tag looks good so check your link to your css file ie, yourlocalwebsite.com/css/newstyle.css should list your css styles, otherwise the link is wrong and you need to rewrite it to the correct path.
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;">
Following code, buttons different only by one style setting, produces dramatically different button looks. Not only is the background color changed, but also the border style, rounded corners, and gradient. I guess losing the gradient isn't too surprising, but the others are, to me. Can anyone explain why? Output of following code is viewable here. I found lots of "solutions" for how to style the button like the default, but why does the default change so dramatically when just trying to change the background color?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="favicon-index.ico" type="image/x-icon" rel="shortcut icon">
<link href="/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>test buttons</h1>
<input type="button" value="gradient">
<input type="button" value="background-color" style="background-color: #ff0;">
</body>
</html>
It has to do something how browser renders them. When no styles are applied it uses the native os style. But when style is applied it must draw it from the beginning. since you are only setting the background value, the border and other style attributes are used from browser defaults.
On every os and browser the native buttons look a little different, but with same styles they look the same.
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
* {}