I have a web page. This web pages references one image file called sprites.png. This file has all of the images in one file. In side of this file I have an image that is 48px x 48px; I'm referencing it in my css like this:
.cell-back {
height:36px;
width:36px;
border-radius:18px;
background-color:green;
}
.play {
width:48px;
height:48px;
background: url('/img/sprites.png') -437px 234px;
}
In my web page, I then have:
<div class="cell-back">
<div class="play"></div>
</div>
As you can imagine, the "play" sprite is larger than the actually space. I'd really like for the "play" image to be 24px x 24px centered within cell-back. But, I haven't figure out how to scale down my sprite image.
Is there a way to do that?
Thank you!
You have to add background-size to it. This way you can scale your shown image.
.play {
width: 48px;
height: 48px;
background-image: url('/img/sprites.png');
background-position: -437px 234px;
background-size: 24px 24px;
}
Related
I've set logo for my web It file is png but browser show me the checkered board on background of my logo
I want delete this checkered board
<div class="bmw"></div>
.bmw{
max-width: 100%;
max-height: 150%;
height: 95px;
width: 95px;
border: 1px;
background-color: transparent;
background-size: cover;
background-image: url(/img/324022-middle.png);
float:right;
margin-right: 30px;
margin-top: 17px;
}
I've searched a lot and I did every one said but none of them didn't work for me.
I set some change but It didn't work again
<img class="bmw" src="/img/324022-middle.png" alt="bmw">
.bmw{
max-width: 100%;
max-height: 150%;
height: 95px;
width: 95px;
border: 1px;
background-color: transparent;
background-size: cover;
float:right;
margin-right: 30px;
margin-top: 17px;
}
I thing some thing can help me should be a transparenting with background of my site
some how please help me
Checkerboard matrix is possibly being exported with the original logo image.
In photo imagery software (like Photoshop) transparency ON shows base checkerboard (for merely visual purposes within the software).
In image software such as Photoshop:
PNG images export as a layer, the top layer being the image or logo, and the base layer being transparent or solid (depending on the settings chosen).
Turning transparency settings OFF gives a PNG with a solid background tone behind the logo.
Examples of two images below:
In (img1) the PNG was exported as a transparency.
Now in the CSS you can control the background color with any tone you want (color or transparent).
We presume the PNG logo you're using has a transparent background (layered). If yes, just CSS background-color:#fff; should do it (or any tone you need).
If that doesn't work you'll likely need to export the logo using different PNG settings.
In (img2) the outer background gray tone is a lower layer we exported with the image. Its still a PNG image. Yet neither the gray tone nor the image can be separated from each other (not with any CSS) because its all 1 layer (all one image).
I have a CSS background sprite (2x size) that's showing up inconsistently on Chrome only. When I load the page, what is supposed to be a series of flags looks like this :
Now, if I use safari or firefox, it loads correctly
How do I fix this strange issue?
.flag {
background: url("flags_2x.png") no-repeat;
display:inline-block;
background-size:18px 7800px;
width:18px;
height:18px;
}
.flag-abkhazia-12 {
width: 12px;
height: 12px;
background-position: 0 0;
}
I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.
Here is the code which i am using on my page
HTML
<a href="#" class="bac" data-role="none" style="color:#fff;">
<strong>Anúnciese gratis</strong>
</a>
CSS
.bac{
background:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");
background-repeat:no-repeat;
display: block;
font:15px/18px Arial;
height: 22px;
padding: 6px 18px 4px 4px;
text-decoration: none;
margin-right:-4px;
}
.bac:hover{
background-attachment:scroll;
background-position:0px -35px;
background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");
background-repeat:no-repeat;
height:22px;
padding:6px 18px 4px 4px;
}
Here is the demo http://jsfiddle.net/Lc4Ky/1/ (open in google chrome browser)
When i open this in google chrome, on hover the image is going off for a second then its showing hover effect.The image is going off only first time on each refresh.
But i want this should be stable.Is there any solution for this?
you don't need to redefine everything in the :hover-block. just change the background-position:
.bac:hover{
background-position:0px -35px;
}
see it working on jsfiddle
I am not sure, but i think you should not apply
background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");
again on hover, so your hover class should be
.bac:hover{
background-position:0px -35px;
}
Edit: Also it is going off because you apply background-image again in hover and google take is as brand new image and take some time to load first time, but after that google pick it from cache and it never goes off again until you reload the page, if your image is in same domain then don't give the full url of image http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png, give the relative path of image like images/sprites_botones1.png