I have a pretty simple Chrome extension to supplement a web page. One of the features is to add links to watch relevant matches on the internet. The relevant HTML is here:
<div class="option-wrap">
<a class="option" href="http://www.google.com" target=_blank>
<div class="option-icon tv-icon"></div>
TV Link
</a>
</div>
With my CSS here:
.tv-icon {
margin-right: 2px;
float: left;
width: 10px;
height: 10px;
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png") no-repeat;
display: inline-block;
}
You'll see that several classes appear in the HTML that aren't in my CSS; they are from the web page as it exists. The goal of this code is to get the television icon specified by the URL to appear inline to the right of the text "TV Link". When I run the code, it seems like there is space allocated for the icon, and the cursor is able to click on this space, but there is no visible icon. Is there something wrong with my CSS< or is this a function of the existing webpage code that I'll have to find a workaround for?
Here's a JSFiddle with the mentioned code.
.tv-icon {
margin-right: 2px;
float: left;
width: 20px;
height: 20px;
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
JSFiddle
changes I made:
remove 'no-repeat' in 'background-image'
add 'background-size' and 'background-repeat'
I also changed the size. Change it back if you want.
Switch the last two lines of your css to this
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
background-size: cover;
#Richard Rodriguez - You shouldn't need no-repeat if you have background-size: cover.
Since cover will encompass said area and reduce the opportunity for repeats to null.
Related
I've been trying to find a library with all different types of file icons, so far with no success so I'm going to need to create my own. The idea is that it'll be able to be used in the same way as emoji CSS to display the file icons as it's much easier than the need for individual columns and DIVs. Ideally I'd be able to do <i class="em-filetype"></i> to display it.
Below is an example of how I plan to go about this.
.em,
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
<i class="em--psd"></i>
I'll eventually host all of the images on my own server so that they're available for use. I just need a way of making this work so that I can then write the CSS for each variation. Preferably just the one that then matches the height of the text it is in.
Any help would be appreciated, as would pointing me towards a library you may know about as I'm so far unable to find one fit for purpose so will have to make my own.
Thanks in advance.
Either you need to apply two classes to the element. <i class="em em--psd"></i>
or
Adjust the selectors:
[class^="em-"],
[class*=" em-"],
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I'm using ASP.NET with a C# backend, and want to have a site show different images for mobile and desktop version. I figured I could do this with CSS, but can't figure out how. I have the different css files set up and working for other elements, but for these ImageButtons, I have some bad behavior. If I don't set the ImageUrl attribute, it does what I need but puts "Search" and a gray outline around my buttons since it is looking for the nonexistent ImageUrl Path. If I do set the ImageUrl attribute as shown below, the text and box go away, but the image won't change as I need them to. I have tried this with a and img tags and LinkButtons but have gotten the same results both ways. What is the best way to change the size and image of these buttons if the user is accessing via a mobile device?
<div class="clear hideSkiplink">
<asp:ImageButton ID="button1" runat="server" CssClass="button1"
OnCommand="ImageButton_Click" CommandName="button1"
ImageUrl="~/images/topbutton1.png"/>
...
<asp:ImageButton ID="button4" runat="server" CssClass="button4"
OnCommand="ImageButton_Click" CommandName="button1"
ImageUrl="~/images/topbutton4.png"/>
</div>
CSS classes look like this:
Normal:
.topbutton1
{
padding: 0px 2px;
background-image: url('../images/topbutton1.png');
background-position: center center;
background-repeat: no-repeat;
display: inline;
width: 180px;
height: 60px;
}
Mobile:
.topbutton1
{
padding: 0px 2px;
background-image: url('../images/topbutton1mobile.png');
background-position: center center;
background-repeat: no-repeat;
display: inline;
width: 20%;
height: auto;
}
Use CSS media queries to switch the image based on screen size:
Introduction to CSS Media Queries
I have a html page which is using the same icon many times, and so I have embedded that icon as a background-image in css.
In css, the class for the icon is like this:
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
I display the icon using a<span class='user'></span> tag, so far, so good.
I want the icon to be a link to another page, but I can't make the icon look correct when I do this.
I have tried:
<img class="user" src=""></img>
but this draws a broken link icon over it in Explorer, it looks ok, but has a border in Chrome. It is obviously wrong.
I also tried:
<span class="user"></span>
and this works, but the mouse cursor does not change to a pointer when over the icon.
What should I be doing?
You should make the element block level (at least inline-block) to set the width/height and explicitly set the cursor. These two things are the key components.
.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block; /* set display so you can set width/height */
cursor: pointer; /* ensure it shows the link cursor */
width: 16px;
height: 16px;
}
And the HTML:
<span class="user"></span>
So, you end up with an inline-block element which shows the image, and then you wrap that with an anchor. This is basically the same as wrapping an anchor around an <img />.
Alternatively, you could do this with just the <a>. You would use the exact same CSS, with this HTML:
Both should achieve what you're after. The difference between these two choices is mostly semantics.
You can set the class attribute on the anchor tag.
Are you looking for something like THIS
The HTML:
The CSS:
.user {
text-indent: -99999px;
background: url("http://www.google.co.in/images/srpr/logo4w.png") no-repeat top left;
float: left;
overflow: hidden;
width: 600px;
height: 200px;
margin: 10px;
}
Hope this is what you need.
try to add this one on your css
cursor:pointer;/*Link with poniter*/
<span class="user" /></span>
I am not good with CSS but have downloaded a template off the net and need to work with that.
I am sure this is a pretty simple thing to do, basically in my html file I have this code:
<div id="topbar"></div>
and in the CSS file I have this code:
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
My question;
how do I make the image/logo into a link (without a border of course) so that people can click it and come back to the homepage?
please recommend a good tutorial to make "table-less" based layouts for html pages.
I am kind of old school and only know how to make a layout with a table, I think i need to upgrade my skills :)
I think you could make the logo into a link like this:
HTML:
<div id="topbar"><img src="images/logo.png" alt="logo"></div>
CSS:
#topbar a {
color: #ffffff;
border: 0;
}
Note: Background images can't be formatted as links.
If you want it to be clickable, you should put the image into the HTML like this:
<img src="images/logo.png" alt="">
and use
#topbar {
display:block;
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
border:0;
}
Otherwise you'd need to resort to an empty anchor element and/or Javascript, which I'd consider bad practice in this case.
1) Background images can't be made into links. What you could do is make the DIV a link instead:
<a id="topbar"></a>`
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
display: block;
border: none;
}
2) Google 'css layout' and begin reading. There's hundreds of thousands of tutorials out there. If you are completely lost, I'd start with a good book:
http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=pd_sim_b8
http://www.amazon.com/Introducing-HTML5-Voices-That-Matter/dp/0321687299/ref=sr_1_7?s=books&ie=UTF8&qid=1318775902&sr=1-7
You really don't want your logo to be a background image. The reason is that background images are not shown when you print. More than likely, you will want your logo visible on a printed copy.