I am trying to make a CSS sheet inside an HTML document to change the background
image of a link.
You can make CSS make it so if you have your mouse go over something it can like change its color
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-color:red;
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-color:green;
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
Is there a way to instead doing a color can you do an image?
I have tried
background-image:url('locationtoimage.jpg')
and it just makes the link disappear. I did change both
background colors to background-image and I did the proper format and things but it wont work? I have tried googling it but everyone just asks for like buttons to things but I am dealing with links.
Sorry if this was already answered somewhere else. I tried looking but I cant find anything. I am really sure that this is possible and simple and I might just be over looking something. Here is what I have.
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-image:url('media.jpg');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('home.jpg');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
this works though
<!DOCTYPE html>
<html>
<head>
<style>
#a1 {
width: 200px;
height: 200px;
}
#a1:link, #a1:visited {
background-image:url('imageatasite');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('imageatasite');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
but I am not using an image online im using one that is in my html folder
but it wont work?
Try googling an image and pasting that in the background image url to see if it's defientley not the file.
Failing that I would suggest to use a separate div wrapper to wrap the images. And on :hover use display none to hide the image you don't want to see on hover.
Then you can set the image to be 100% that of the div.
Check the file extension too just to be sure.
I dont fully understand what the problem is but other images do work. The images I wanted to use were the same file extension in the same folder but I took a snapshot of them and now they work just fine. Thank you for helping guys I think all is well now.
Related
I'm a real noob at CSS/HTML, so please forgive me.
I tried to change the background page color on the CSS file linked to my html file, and it doesn't work. Whereas when I just flat out change it between the style tags in my HTML file, it works. What gives?
Plain and simple:
Ex1.css
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
SamplePage.html
<!doctype html>
<html>
<head>
<title> Sample Page </title>
<link rel = "stylesheet" href="Ex1.css">
</head>
<body>
Hello. This is a sample Page.
</body>
</html>
Your HTML is correct, and links to your CSS correctly (assuming Ex1.css is in the same folder as your HTML).
Your CSS is almost correct; the only problem is that you shouldn't include any HTML tags in your CSS document. Ex1.css should only contain the actual CSS declarations themselves (body { }).
body {
background-color: lightblue;
}
<body>
Hello. This is a sample Page.
</body>
If in doubt, you can validate your CSS with W3's CSS Validator.
Hope this helps! :)
Reduce the contents of your Ex1.css file to this:
body {
background-color: lightblue;
}
(no HTML code in CSS files!)
your css file will just have. Plain and simple
body {
background-color: lightblue;
}
change your css file to this:
body {
background-color: lightblue;
}
I want to make the head and body different things, independent from each other. Because of this, I want different background colors, but I've not been able to achieve that.
If anyone knows how I can make the styling for the head and body show up and make the sections look different, please let me know. I've included the code I used on the site below.
<html>
<head>
<p>Hi there!</p>
</head>
<body>
<style>
body {
background-color: lightblue;
}
head {
background-color: lightgreen;
}
</style>
<p>Hi there!</p>
</body>
</html>
Image of the output:
the page output
The head tag is used to describe metadata and important information about your document. What shows up there is not visible.
Your p tag should be under the body tag, not the head tag.
What you are thinking of is probably the header section of your webpage, which is included under your body tag.
Also, your css declarations should take place in their own separate file.
Here is what your code should look like
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<p>Hi there!</p>
</body>
</html>
Styles.css
body {
background-color: lightblue;
}
header {
background-color: lightgreen;
}
I have an issue with the background-image property in an external CSS file. I can't seem to get the image to show up. Its been while since I have coded so maybe it's just me forgetting everything I know but I'm pretty sure I have the link right. The website is set up like this
/Root/
index.html
/styles/
webstyles.css
/img/
header.jpg
The background works when I use it inline so it's starting to annoy me.
HTML
<html>
<head>
<meta charset="UTF-8">
<title>MYSITE</title>
<link rel="stylesheet" type="text/css" href="/styles/webstyles.css">
</head>
<body>
<div class="headerBar">
<h1 class="Hlogo">Title</h1>
</div>
</body>
</html>
CSS
body
{
background:#999999;
}
headerBar
{
background: url(/styles/img/header.jpg);
}
Thanks for any help.
If this style is in webstyles.css, then you need to use this way.
.headerBar{
background: url('img/header.jpg');
}
Based on the folder structure, "styles/img/header.jpg" is still a wrong path.
And also, I'm not sure why, but you are missing . for CSS class selector when selecting the headerBar. Fix that one too.
You can use:
background: url("styles/img/header.jpg");
Replace
background: url(/styles/img/header.jpg);
with
background: url('img/header.jpg');
You can use:
.headerBar
{
background: url("styles/img/header.jpg");
}
since styles folder is the same level as your HTML file.
However, if your img folder is not placed inside styles folder (which makes more sense), then you want this path instead:
.headerBar
{
background: url('img/header.jpg');
}
Also you're missing . to target class .headerBar
I have been scratchingmy head about why the background image function is not working for me. Any suggestions? Yes I already know that Im a dumbass with severe attention problems..
<head>
<style type="text/css">
<!-- As you can see below, i tried to include a header image in 3 different ways -->
header {height:200px; background-url:(http://i.imgur.com/HtAvI.jpg) ; }
#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; background:url(http://i.imgur.com/HtAvI.jpg) no-repeat; height:400px; }
#header{background image: url(http://i.imgur.com/HtAvI.jpg);}
<!-- i tried including it in the body as well, to no avail -->
body { background image: url(http://i.imgur.com/HtAvI.jpg) ; }
p {color: red}
</style>
</head>
<body>
<p>this is text</p>
</body>"
Change background image: to background-image:. Also there is no property like background-url
There is no background-url. There is no background<space>image. There is background-image and there is background.
Once you fix those problems the images should display correctly.
I am very new to css so this maybe a simple answer. I have 2 scenarios and 1 works the other doesn't. I hope someone can help me out.
WORKS:
<head>
<style type="text/css">
body {
background-image:url('views/default/images/home.jpg');
;}
</style>
</head>
DOESN'T WORK:
<head>
<link rel="stylesheet" type="text/css" href="views/default/home_style.css" />
</head>
In home_style.css>
body{
background-image:url('views/default/images/home.jpg');
margin-top: 0px !important;
padding-top: 0px !important;
}
It looks like your CSS file is in the views/default/ folder, while the image is in the views/default/images/ folder.
Define image paths in your CSS relative to the CSS file, not the HTML file that displays everything:
background-image:url('images/home.jpg');
In my case:
I had a CSS folder. So, inside my CSS folder I had my style.css so I was typing inside my style.css the following:
background: url('img/mybgimg.jpg')
instead of
background: url('../img/mybgimg.jpg')
...I hope this can help to anyone who is having the same issue.