my CSS:
background-image: url(/images/framework/arrow-down-small.png) no-repeat center; /* fallback */
background-image: url(/images/framework/arrow-down-small.png) no-repeat center, -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); /* Saf4+, Chrome */
background-image: url(/images/framework/arrow-down-small.png) no-repeat center, -webkit-linear-gradient(top, #eee, #ccc); /* Chrome 10+, Saf5.1+ */
background-image: url(/images/framework/arrow-down-small.png) no-repeat center, -moz-linear-gradient(top, #eee, #ccc); /* FF3.6+ */
background-image: url(/images/framework/arrow-down-small.png) no-repeat center, -ms-linear-gradient(top, #eee, #ccc); /* IE10 */
background-image: url(/images/framework/arrow-down-small.png) no-repeat center, -o-linear-gradient(top, #eee, #ccc); /* Opera 11.10+ */
background-image: url(/images/framework/arrow-down-small.png) no-repeat center, linear-gradient(top, #eee, #ccc); /* W3C */
All I want is a background-image and a gradient at the same time. The HTML element is:
<input type="button" class="mybutton" />
But
the background-image doesn't show at all
the gradient isn't there
The absolute path is right because if I try a simple background:url(...) without gradient the image is there.
What's wrong?
Thanks
Bernhard
With no-repeat you should skip the -image, try only with background:", such as :
background-image: url('image.png') no-repeat; /* Doesn't work */
background-image: url('image.png'); /* Works */
When you say you use only background: I think it does work because you aren't using background-image
And maybe you should try :
<input type = "image" class = "mybutton"/>
Hope that helps !
EDIT : Quotes are not mandatory
background-image: url(image.png);
background-image: url("image.png");
background-image: url('image.png');
Is the same thing
Related
Let me start by saying thank you in advance!
I'm on this site called StreamLabs for twitch streamers and they've introduced a way to use custom HTML, CSS, & JS to customize your look.
They have a thing called "Stream boss" that reacts to users following, sub, and/or donating.
I don't know how to change the name of the streamboss can someone help me with that
/*
bar(asset) width is 315
math for doing the stuff
x = {asset_length} - ( {asset_length} * ( {current_health}/{max_health} ) );
*/
// Events will be sent when the boss is damaged or killed.
// Please use event listeners to run functions.
document.addEventListener('bossLoad', function(obj) {
// obj.detail will contain information about the current boss
// this will fire only once when the widget loads
console.log(obj.detail);
//$('#user_pic').attr('src', obj.detail.boss_img);
$('#current_health').text(obj.detail.current_health);
$('#total_health').text(obj.detail.total_health);
$('#username').text(obj.detail.boss_name);
});
document.addEventListener('bossDamaged', function(obj) {
// obj.detail will contain information about the boss and a
// custom message
var x_coordinate = 0;
console.log(obj.detail);
// set the text
$('#current_health').text(obj.detail.boss.current_health);
// calculate where the x is
x_coordinate = 315 - (315 * (Number(obj.detail.boss.current_health) / Number(obj.detail.boss.total_health)));
// round the output
x_coordinate = -(~~x_coordinate);
// we animate the `background-position-x`
$('#vbi-health-bar').animate({
'background-position-x': x_coordinate + 'px'
}, 1000);
});
// Similarly for for when a boss is killed
document.addEventListener('bossKilled', function(obj) {
var x_coordinate = 0;
console.log(obj.detail);
$('#username').text(obj.detail.boss.boss_name);
//$('#user_pic').attr('src', obj.detail.boss.boss_img);
$('#current_health').text(obj.detail.boss.current_health);
$('#total_health').text(obj.detail.boss.total_health);
// calculate where the x is
x_coordinate = 315 - (315 * (Number(obj.detail.boss.current_health) / Number(obj.detail.boss.total_health)));
// round the output
x_coordinate = -(~~x_coordinate);
// we animate the `background-position-x`
$('#vbi-health-bar').animate({
'background-position-x': x_coordinate + 'px'
}, 1000);
});
#import url('https://fonts.googleapis.com/css?family=Teko:700');
/* All html objects will be wrapped in the #wrap div */
#username,
#user_hp_cont {
height: 33px;
line-height: 50px;
font-family: 'Teko', sans-serif;
font-size: 1.2em;
font-weight: 700;
text-shadow: 0px 0px 5.64px rgba(0, 0, 0, 0.004);
background-image: -webkit-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For Chrome and Safari */
background-image: -moz-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For pre-releases of IE 10*/
background-image: -o-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* Standard syntax; must be last #c0ff00, #00ff0c*/
color: transparent;
-webkit-background-clip: text;
background-clip: text;
text-transform: uppercase;
}
.boss_cont {
height: 120px;
color: white;
background-color: transparent;
background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912534steam_boss_frame.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.vbi-aligner {
width: 370px;
height: 35px;
margin: 0 auto;
}
.vbi-aligner>#username {
float: left;
}
.vbi-aligner>#user_hp_cont {
float: right;
}
.vbi-health-frame {
position: absolute;
width: 315px;
height: 47px;
left: calc(50% - 157px);
background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912558health_bar_frame.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
-ms-transform: translateY(15px);
-webkit-transform: translateY(15px);
transform: translateY(15px);
overflow: hidden;
z-index: 1;
}
.vbi-health-magic {
background: transparent;
z-index: 0;
}
.vbi-health-bar {
position: absolute;
top: 1px;
width: 315px;
height: 45px;
background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912589health_bar.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
-ms-transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out;
-webkit-clip-path: polygon(0 50%, 25px 0, 100% 0, 100% 100%, 25px 100%);
clip-path: polygon(0 50%, 25px 0, 100% 0, 100% 100%, 25px 100%);
}
<!-- All html objects will be wrapped in the #wrap div -->
<div class='boss_cont'>
<div class="vbi-aligner">
<div id='ussername'></div>
<div id='user_hp_cont'>
HP <span id='current_health'>0</span>/<span id='total_health'>0</span>
</div>
</div>
<div class="vbi-health-frame vbi-health-magic">
<div class="vbi-health-bar" id="vbi-health-bar"></div>
</div>
<div class="vbi-health-frame"></div>
<div style="display: none;" class='user_pic_cont'>
<img id='user_pic' src='' \>
</div>
<div id='message'></div>
</div>
It's right there in the custom JS section. Wherever you see the line:
$('#username').text(obj.detail.boss_name);
Change '#username' to whatever you want your boss name to be. It's in there twice.
I can't adjust background img of a div so it is filled by the image, regardless of div's and img's size. If the image is smaller then it should be streched and vice versa. The whole image should be visible, regardless of deformation and loss of quality.
I tried all this combinations and permutations, and many more. Simply - doesn't work.
background-repeat: no-repeat;
background-position: top center;
background-size: auto;
background-size: cover;
background-size: contain;
background-size: 100% 100%;
I use Firefox 22, css is valid css3, according to W3C validator.
This is for CSS3 only
background-size: 100% 100%;
UPD: For old IE you can use filters:
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale')"; /* IE8 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale'); /* pre IE8 */
Try setting the same height and width for the image which you have given for the div.
var currentHeight = $('.element_class').height();
var currentWidth = $('.element_class').width();
$('.yourimage').height()=currentHeight;
$('.yourimage').height()=currentWidth;
I'm facing a problem with a newsletter. I have included media queries in it so mobile viewers get something nicer. If I view my newsletter in a browser and resize it, I can see that it works fine, both on mobile/desktop. But when I view it through iphone's Mail app, my media queries are getting ignored for some reasons I'm not aware about. The mailbox I'm testing it with isn't a gmail one by the way.
You can see it here : http://www.libraryofarts.com/newsletters/11-06-13/
Here's the head part of my code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Pre-Opening librairie LO/A</title>
<style type="text/css" media="screen">
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
img{-ms-interpolation-mode:bicubic;}
/*
* RESET STYLES
*/
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/*
* MOBILE STYLES
*/
#media only screen and (max-device-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
#bodyCell{padding:10px !important;}
/* ======== Page Styles ======== */
#templateContainer{
max-width:700px !important;
width:100% !important;
}
h1{
font-size:24px !important;
line-height:100% !important;
}
h2{
font-size:20px !important;
line-height:100% !important;
}
h3{
font-size:18px !important;
line-height:100% !important;
}
h4{
font-size:16px !important;
line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
#templateHeader p {
pointer-events: none;
}
#templateHeader p > a {
text-decoration:none; color:inherit;
}
#headerImage{
height:auto !important;
max-width:700px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
/* ======== Body Styles ======== */
.bodyContent{
font-size:18px !important;
line-height:125% !important;
}
/* ======== Column Styles ======== */
.templateColumnContainer{display:block !important; width:100% !important;}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
/* ======== Footer Styles ======== */
.footerContent{
font-size:14px !important;
line-height:115% !important;
}
.footerContent.Bottom {
text-align : center;
}
.footerContent.Bottom .online {
margin-left : 0;
margin-top : 10px;
display : block;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
.footerContent ul {
list-style: none;
margin : 0;
padding : 0;
}
.footerContent ul li {
float : none !important;
}
.footerContent ul li img {
display : block;
margin : 0 auto;
}
.test {display : none !important;}
}
</style>
Has anyone an idea on why I can't get this media query working through iphone's Mail ?
Thanks,
Faced the same issue
You should use " visibility : hidden " rather than " display : none " (property). I faced the same problem and resolved it with the help of "visibility"
element {
visibility: visible;
}
element {
visibility: hidden;
}
other example :
{ visibility: hidden; }
{ visibility: visible; }
{ visibility: collapse; }
You don't need " !important " at all if you use the correct CSS Property
Read this for more clarity :
w3Schools
difference between display and visibility
I have the following CSS snippet in my site...
The span class renders fine on brower / ipad but the #media does not alter the font size on the iphone.
Please can someone let me know what I am doing wrong...
span.message
{display:table-column;
width:589px; min-height: 65px;
padding: 10px 10px 10px 10px;
float:right;
vertical-align: top;
border-top-width : 0;
background : white;
font : normal 70% sans-serif; vertical-align: top; color: #000000;
border-radius : 0em 1em 1em 0em;}
#media screen and (max-width:640px){
span.message {font-size:40%;}
}
Thanks to gaynorvader...
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
The above #media solves the font-resize issue. (provided you type it correctly).
You should see the answer in this link you are missing -webkit-text-size-adjust: none;
I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes.
My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image.
Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
Can anyone please help? Thanks in advance.
Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like
<body>
<div id="background"></div>
...
</body>
And for the CSS I stated the following:
#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}
And this did the trick for me. Hopefully it helps (someone out there :P)
You looking for css background-attachment property.
div[data-role="page"]{
background-attachment: fixed;
}
Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.
you can try this:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
works fine for me.
You can set your background image to the jQuery page:
.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
Try with this, this work for me.
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0 fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
<body>
<div id="background"></div>
...
</body>
css:
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}
The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by #media