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
Related
How do you do?
I have converted XD file to html, css code.
I checked on my PC(windows), but I didn't check on Macbook.
Details:
I coded button and used pseudo element to display right arrow at the right side.
Here is my code.
HTML
<button class="register btn-top-register">Register</button>
CSS
.register{
background-color: #FF6D1F;
border-radius: 10px;
color: white;
padding: 20px 50px;
margin-right: 5%;
border: none;
position: relative;
box-shadow: 1px 5px 0px #8b3507;
}
.register::after{
content: '\1F892';
width: 20px;
height: 20px;
position: absolute;
right: 0;
}
This register button displayed triangle on Windows, but step shape on Macbook.
I tried many times to fix difference.
Could you help me how to fix and display the same shape-triangle?
You can use browserstack to test your code in different devices such as mac and ios
Have a look at these unicodes https://www.toptal.com/designers/htmlarrows/.
If you want to use of unicode I don't know exactly.
I suggest you to use SVG or img to display an icon on your button.
You can download an SVG icon from flatiIcon, or you can use of featherIcon or font awesome for example.
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.
Let's say that this is my HTML.
<div id="spirit_tutorial_reward">
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"></div>
<div id="spirit_tutorial_reward_header">45 Spirit</div>
<div id="spirit_tutorial_reward_text">Use Spirit to recruit new Rusherz in the Locker Room!</div>
</div>
And this is my styling:
#spirit_tutorial_reward
{
position:absolute;
top:77px;
left:371px;
width:45%;
}
#spirit_tutorial_reward_icon
{
background:url(../images/gift_icon_spirit.png) top no-repeat;
width:60px;
height:60px;
position:absolute;
top:0px;
left:0px;
float:left;
}
#spirit_tutorial_reward_header
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:0px;
float:left;
}
#spirit_tutorial_reward_text
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:22px;
float:left;
}
On no-zoom or normal mode , the images appear to have chopped off on Firefox (see attached image) but when I zoom my page , the image appears to becoming better (see attached image). I am facing this issue only in Firefox. Can anyone here help me out.
EDIT : FIDDLE demo for the problem
This worked for me in one of my recent encounters. This prevented the image from being cut off:
transform: rotate(0.0001deg);
Try setting background-size to 59px which i did in that fiddle and worked as expected.
i.e
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size:59px;"></div>
If this answer was helpful.Dont forget to mark to apport or mark as answer
Thanks
AB
I think it's a subpixel problem. That's the reason the image works fine in some zoom modes.
I edited your jsFiddle to set the background-size to 99.9%, and then works properly. You can see the example here.
Note: I put the !important to overwrite the inline styles... feeling lazy, you know ;)
If you want the background image to cover whole page.. apply the image to background and give background size:cover to it..
you may try this:
body {
background-image: url(your-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #EEE;
background-size: cover;
}
you may refer this http://www.css3.info/preview/background-size/
If I have a button like this one:
a#settingsCloseButton {
background: url("img/my_account_sprite.png") no-repeat scroll 0 -155px transparent;
display: block;
height: 14px;
text-indent: -3000px;
width: 14px;
}
I use to write the :hover and :active like this:
a#settingsCloseButton:hover {
background: url("img/my_account_sprite.png") no-repeat scroll -14px -155px transparent;
}
a#settingsCloseButton:active {
background: url("img/my_account_sprite.png") no-repeat scroll -28px -155px transparent;
}
My Question is: If I will write it only with background-poistion like this would it get me better loading performence:
a#settingsCloseButton:hover {
background-posiiton: -14px -155px;
}
a#settingsCloseButton:active {
background-posiiton: -28px -155px;
}
It is easier for to duplicate the whole background properties because then I can tell where the image is being taken from (like the first example). but does it means it re-loads it? Is one option loads faster then the other or they are both the same?
thanks,
Alon
There is no performance penalty incurred in the form of extra loads or anything like that. Once a browser has loaded an image the first time, it has the image in memory and doesn't need to load it again every time it's referenced in a stylesheet.
Setting just the background-position property simply makes it clear that all that's really changing is the background position. It's not necessary to repeat the rest of the values (image, repeat, attachment) if they're not going to change in the :hover and :active states.
I honestly don't think it would affect performance, since the image is already cached when its loaded for the first time.
But, also - I don't see the use of setting "background" for both times.
I would just do
a#settingsCloseButton{
background-image: url('img/my_account_sprite.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
a#settingsCloseButton:hover{
background-position: -20px -20px;
}
Shai.