I have a sprites like this:
and display using the following css:
.sprite { background: url('sprite.png') no-repeat top left; width: 40px; height: 40px; }
.sprite.Live { background-position: 0px 0px; }
.sprite.Private { background-position: -50px 0px; }
.sprite.Public { background-position: -100px 0px; }
But there is always a border around the image. I make sure the img {border:0} is set. I am using Bootstrap 3. Is this caused by bootstrap?
It turns out its Chrome's issue. Here is the closest answer I can find.
It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.
https://stackoverflow.com/a/9173082/772481
Related
So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?
Here's the CSS:
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 707px;
width: 95px;
height: 64px;
margin: 0;
background: url(../images/button%20texture%20b.jpg) center;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#Home:hover {
width:95px;
background: url(../images/button%20overlay%20b.png) ;
background-size: cover;
}
.
#Home:hover {
width: 95px;
background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
background-size: cover;
}
Thanks!
I would recommend using this code:
#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }
As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.
I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.
I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):
body {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,...');
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.
You can use linear-gradient() for the bar color and use background-size to limit its height:
body {
background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}
You can just create a div and style it as you want:
HTML
<div class="bar"></div>
CSS
.bar {
width: 100%;
height: 71px;
background: #DDD;
margin-top: 81px;
padding: 0px;
}
Fiddle Demo
Try adding a Div with a z-index.
This div can you give it's own css style
Simply placed a div with id or class..
<div id="topbar"></div>
and placed css code in stylesheet
#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc; }
this not only float you div as a top bar but also extend to you browser 100%.
I'm fighting with some CSS here that doesn't want to be crowbarred into submission. I just want the sprites there, without a border around it, and to lower the opacity when hovered over.
Here's how it looks across browsers so far:
The Chrome version is closest to what I want, but I can't get the border to disappear, and the hover opacity doesn't do anything.
Code-wise, here's where I'm at so far:
.social-icons {
background: url('/wp-content/themes/MySite/images/social-profiles/social-profiles-s.png') top left no-repeat;
width: 32px;
height: 32px;
}
.social-icons img {
border-style: none;
}
.social-icons img:hover {
opacity: 0.8;
}
img#facebook-ico.social-icons {
background-position: 0px 0px;
}
img#twitter-ico.social-icons {
background-position: -34px 0px;
}
img#google-plus-ico.social-icons {
background-position: -68px 0px;
}
img#rss-ico.social-icons {
background-position: -136px 0px;
}
I do not know why, but the fact that you have empty image elements (no 'src') somehow causes the borders. I would remove the image elements and place the backgrounds directly on the anchor tags. Then float and adjust margins as needed:
.widget-container a:hover {
background: url('/wp-content/themes/MeanwhileInAmerica/images/social-profiles/social-profiles-s.png') top left no-repeat;
width: 32px;
height: 32px;
display: block;
float: left;
}
.widget-container a {
opacity(0.8);
}
I tested it with Dev Tools... the border was gone and the opacity change worked too.
You may have to target your elements differently to avoid changing other parts of the page. The sprites look fine otherwise.
EDIT
According to: http://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src
"The src attribute must be present".
I am doing some research for a ruby on rails web app I am working on and need some help with a few questions.
Is it possible to render/display images as the background of a web page using a masonry jquery type pluggin?
If the answer to the 1st question is no, then is is possible to manually render multiple images as a background using css(3) and html(5)?
Lastly, if I can use 1, 2 or any other method to display multiple background images, will I be able to apply regular css code to manipulate the images?
Thanks in advance for the help.
It is possible with CSS3. At it's most simplest, here is an example of how you would achieve it:
#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}
The order runs from first (on the left) being the top layer to the last (on the right) being the bottom background layer (that's if you're layering them).
EDIT: In order to apply more complicated stylings to each background image such as greyscale you need to break up the CSS into this sort of format:
/* this is the master css block - the height and width here represent the total coverage for all child background images */
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing {
height: 300px;
width: 480px;
position: relative;
}
/* individual stylings for each background image featured - apply greyscale and separate width and heights here */
.sample1 .sea {
background: url(media/sea.png) repeat-x top left;
}
.sample1 .mermaid {
background: url(media/mermaid.svg) repeat-x bottom left;
}
.sample1 .fish {
background: url(media/fish.svg) no-repeat;
height: 70px;
width: 100px;
left: 30px;
top: 90px;
position: absolute;
}
.sample1 .fishing {
background: url(media/fishing.svg) no-repeat top right 10px;
}
I have a table that gets sorted. The headers have background images (arrows) to show the sorting direction.
The current CSS uses 3 different images like this:
th {
padding-right: 21px;
}
th.sorting {
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}
Working example in the JSfiddle here.
Is there a way to reduce these to one image and use CSS sprites? The problem is that a merged image cannot simply be used as a background to the header cell, because multiple images may become visible at once, like here.
I'd like to avoid using extra elements if possible. IE7 support would be great but I could probably live without it.
Pseudo elements like :after could work, but I can't find a way to position the icons in the same way. JSfiddle example.
I figured out a way for pseudo elements to work. Set the table headers as position: relative, then something like this:
.sorting:before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 7px;
height: 9px;
margin-top:-4px;
background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}
The icon is positioned 50% from the top, then moved upward a few pixels to be vertically centered.
You can use SpriteMe to generate sprite images on your site.
.sorting_asc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px 0px;
}
.sorting {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -27px;
}
.sorting_desc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -53px;
}
A quick Google search for a CSS sprite generator comes up with a few options. Though I've never used any of these services myself, I have usually made a single PNG image with transparency. Then you would reference your CSS like this:
th {
padding-right: 21px;
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
background-position: -100px -100px;
}
th.sorting_asc {
background-position: -200px -200px;
}
th.sorting_desc {
background-position: -300px -300px;
}
Replace the background-position property values with the appropriate coordinates. I think the CSS sprite services can create these values for you based on their compression once it is done, but the CSS coordinates may need some tweaks to get it exactly how you want.