I am trying to get a background image in an tag working. I am firstly trying to get a modification of an example I found off the web working but it is not. Code as below:
<html>
<body>
<style>
a {
background-color: blue;
background-image: url("./linkedinlogo.png");
display: block;
height:32px;
width:32px;
}
</style>
</body>
</html>
The background colour displays but not the background image. Edge, chrome, Firefox tried. image and HTML file is same directory. Filename spelling checked and intellisense lists file when ./ is typed.
Tried removing background colour to see if helps but doesn't.
Kind regards,
Tim
It is working as expected. Check this out
a {
background-image: url("https://www.edigitalagency.com.au/wp-content/uploads/Linkedin-logo-icon-png.png");
height:32px;
width:32px;
display: inline-block;
background-size: contain;
}
Add The Following Code:
<html>
<body>
<style>
a {
background-color: blue;
background-image: url("./linkedinlogo.png");
display: block;
height:32px;
width:32px;
}
</style>
<a href="https://pagedart.com">
<img src="imgSrc"></img>
</a>
</body>
</html>
Related
I am generating an html, where I have an image class as shown. I can view the image correctly in chrome/safari. But while the text is shown in Firefox the image does not
By incorrectly I mean that the image does not show
img.wink {
content: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
}
<h1>Hello</h1>
<img class="wink" />
I am not insane
edit:
ok so following up on #joshadams response it seems like I have to use a different way to support firefox/chrome. Is there a simple way which would work for both?
I think img is not waiting for a content, but for a src, you can try that trick.
img.wink,
img.wink::after {
content: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
}
.wink {
display: inline-block;
background: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=) no-repeat left center;
width: 20px;
height: 20px;
}
<h1>Hello</h1>
<span class="wink"></span>
<br/>
I am not insane
need to add the ::after for firefox or sometimes ::before depending on version: https://css-tricks.com/almanac/selectors/a/after-and-before/
/*firefox*/
img.wink::after {
content: url(https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png);
}
/*chrome*/
img.wink {
content: url(https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png);
height:10px;
width: 10px:
}
<h1>Hello</h1>
<img class="wink" />
<br/>
I am not insane <img class="win ab" width = "30px" />
I want to have a button with an image and a link. Here is my style-code:
<style>
twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30%;
height: 30%;
}
</style>
and my body code:
<twitter href="#"> </twitter>
But it doesnt show any image. I tried a lot of different image-paths, but it just will not show...
oh. why not
<img src= "cima/social/twitter.png" />
<style>
a img {width:30%;height:30%;}
</style>
You HTML is invalid as you are using custom (non-valid) elements. Try
HTML
<a class="twitter" href="#"> </a>
CSS
.twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30px; /* or whatever value */
height: 30px;
}
I have a header and I would like to create a back to homepage link from it. Is it a mistake if I do this?
<a href="index.php?menuid=1" title="Go back to the homepage.">
<header>
<h1>Title of the page</h1>
</header>
</a>
If it's better to create link from the <h1> then how to expand the link to the size of the header? Because the link on it looks like this:
If you want the entire header to be a link, that is the correct way to do it (at least in modern HTML5 browsers). If you want your <h1> to be the full width of <header> then add
h1 {
width: 100%
}
to your CSS (though you should add an id or class to the h1 and select through that, better than a general h1).
Adding my answer for what is worth (also updated you fiddle)
header{
display:block;
height:210px;
width:560px;
text-align:left;
background-color:#eb4172;
border: 20px solid transparent;
}
h1 {
background-color:#00aaff;
width:100%;
height:100%;
display:block;
}
h1 a{
width: 100%;
display: block;
height: 100%;
}
I've looked at similar questions relating to this but I can't seem to find anyone having the same problem.
I'm attempting to us CSS in order to make a sumbit button an image. Here's the code
HTML
<input type="submit" class="search" alt="search" >
CSS
input.search {
background-image:url(../search-icon2.png);
width:35px;
height:35px;
}
This returns a broken image in the web page even though the image "search-icon2.png" is exactly 35px x 35px and is in the correct place on the server.
If anyone could suggest what might the problem be, it would be greatly appreciated.
Thanks in advance. J
You could add the image into the same location as the css file with the css having the url('search-icon2.png'). This would verify your path is truly correct and it's not another issue. If you still have an issue could maybe check the spelling of the image??
HTML
<a class="buttonImage">
<span class="left_img"> Hello this is coding
</span>
<span class="right_img"></span>
</a>
CSS
.buttonImage {
display:inline-block;
vertical-align:top;
text-decoration:none;
}
.buttonImage .left_img {
background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
float:left;
line-height: 15px;
padding: 7px 0 5px 8px;
color: #1b1d60;
cursor: pointer;
}
.right_img {
background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
float:left;
height: 27px;
width:7px;
cursor: pointer;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img {
background-position:0 -26px;
color:#fff;
}
Fiddle Demo
It will work fine just follow the following steps:
Search button image size must not be greater than whatever you initialize width and height in your css rule.
That means if you give width:100px and height:30px so images must be the same size.Just re-size your image with the help of Image editor software my personal preference is Adobe Photoshop.If your image size is greater than css rule so images may not come or image will be broken.I have edited your html as well as css.
<!DOCTYPE html>
<html>
<head>
<style>
input.search{
background-image:url(url.jpg);
text-indent:-9999px;
width: 100px;
height: 30px;
border:2px solid rgb(0,102,153);
}
</style>
</head>
<body>
<input type="submit" class="search" alt="search">
</body>
</html>
Hope the answer!
I was trying to change an image on my page when i hover over it. I have also seen many examples about this and i'm still unable to make this work. Can anyone please tell me where am i going wrong?
Here is html my code:-
<body>
<a id="swap"> </a>
</body>
css:-
#swap {
background-image:url('slide1.jpg');
}
#swap:hover {
background-image:url('slide2.jpg');
}
This works
#swap {
display: block;
background: url('http://lorempixel.com/output/cats-q-c-100-100-8.jpg') no-repeat;
}
#swap:hover {
background: url('http://lorempixel.com/output/catsq-c-100-100-9.jpg') no-repeat;
}
Try this:
<style type="text/css">
#swap {
display:block;
position:relative;
height:100px;
width: 200px;
background-image: url(slide1.jpg);
background-repeat:no-repeat;
}
#swap:hover {
background-image: url(slide2.jpg);
background-repeat:no-repeat;
}
</style>
<body>
<div id="swap"></div>
</body>
Change width and height to your image dimentions. This solution works, I tested.