Here's my CSS:
.banner-text-BG {
background: #00A7E1 url(images/sale_tag.png) left center no-repeat !important;
background-size: 20px 20px;
height: auto;
padding: 15px;
position: static;
width: auto;
-webkit-border-radius: 70px 10px 10px 70px;
-moz-border-radius: 70px 10px 10px 70px;
border-radius: 70px 10px 10px 70px;
padding-left: 70px;
}
Contrary to all the other styles, the "background-size: 20px;" has no effect on my page, is not visible in Firebug, and as a sidenote is not highlighted as a valid CSS instruction in Notepad++. Same with "background-size: 20px;" or "background-size: 20px auto;"
Am I missing something? Why does it not work?
As the background-size docs state:
If the value of this property is not set in a background shorthand
property that is applied to the element after the background-size CSS
property, the value of this property is then reset to its initial
value by the shorthand property.
In other words, if you're using the shorthand property but don't include the background-size rule as a part of it, the separate background-size is essentially reset and ignored.
So to get around that you just need to roll it into the background shorthand you're already using by adding a slash after the background-position and including your size:
background: #00A7E1 url(http://placekitten.com/200/200) left center/20px 20px no-repeat !important;
jsFiddle example
"!important" should be avoided.
I would split all background attributes as such:
.banner-text-BG {
background-image: url(images/sale_tag.png)
background-position: left center;
background-color: #00A7E1;
background-repeat: no-repeat;
background-size: 20px 20px;
}
Your use of !important in the background shorthand is preventing the background-size property from applying, at least in Chrome.
Removing the !important allows the background-sizing to take effect. See the jsfiddle: http://jsfiddle.net/QVXsj/9/
Related
Trying to figure out how I add a shadow to 3 images I have central on my page, looks a little weird without one I believe.
At the moment my HMTL code for this is below:
<div id="imagesMain">
<img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\Gym.jpg" id="gym">
<img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\me.jpg" id="me">
<img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\NFL.jpg" id="nfl">
</div>
and my CSS code for these images is also below:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
padding-top: 5px;
}
#imagesMain img {
height: auto;
width: 10%;
vertical-align: middle;
border-radius: 50%;
padding: 5%;
padding-bottom: 0;
padding-top: 5px;
}
Thanks, Callum
Try using this filter: drop-shadow(1px 14px 5px rgb(14, 17, 17)); and adjust the shadow according to your needs...
You can do that by using a box-shadow generator for CSS3.
CSS3 box-shadow generator
You need to copy the box-shadow and add it to the image.
For images, I'd use a box-shadow property :
div {
box-shadow: 10px 10px 5px grey;
}
The first two arguments are about the height/width of your shadow box, third argument is about the blurring effect and last one is the color of your shadow.
Chrome is working fine in containing an image with an overflow:hidden rounded div, however safari does not do a good job at this, the overflow: hidden doesn't seem to work here.
here's an example
here is my sass code:
.profile-image-container
position: relative
top: 3px
display: inline-block
cursor: pointer
.profile-image
width: 33px
height: 33px
display: block
position: relative
border: 2px solid $default-border-color
position: relative
top: -5px
border-radius: 50%
-moz-border-radius: 50%
-webkit-border-radius: 50%
overflow: hidden
haml:
.profile-image-container
.profile-image
=image_tag "avatar.jpg"
%span.status.online
%i.icon.icon-check-small
fiddle:
http://jsfiddle.net/LB2EQ/
Problem 1. In Safari images don't inherit border-radius, so you'll have to add it.
Problem 2. Your image has a different width & height than the profile pic container which is why you'll see a very strange border-radius (only upper left) if you don't resize it.
.profile-image img{
width:33px;
height:33px;
border-radius:50%;
}
See working solution on jsfiddle: http://jsfiddle.net/LB2EQ/1/
I've been trying to use a SVG file as background for a header on my site, but it doesn't seem to show up in Webkit browsers (I tried Chrome and Safari; on mac). Firefox seems to display it correctly.
Here's my CSS:
header {
overflow: auto;
width: 100%;
height: 80px;
background: url(../img/navbg.svg) no-repeat;
background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
margin: 0 0 20px 0;
padding: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: inset 0 0 1px #fff,
inset 0 1px 0 rgba(255,255,255,.3),
0 1px 2px rgba(0,0,0,.5);
}
Any ideas on how to fix this?
Check this , it may helps you.
http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/
I found an example done in March 2012. With the warning:
"SVG included as CSS can't be scripted and positioning is hard. Therefore only use this method for background illustrations."
Hope this helps: http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-css-background.html
Check if your SVG is missing height & width declarations. Without these, background SVG's won't show in Safari 5.
Trying to add a box around a menu of links in Wordpress. So far I've got this - which should make a box of 150px x 50px if I am correct. However, while margin, padding, etc, all work, this does not. Why would that be the case? Has width become deprecated in recent CSS?
.menu-header .menu-item {
display: inline !important;
margin: 0px 50px !important;
border-style: solid !important;
border-width: 2px !important;
width: 150px !important;
height: 50px !important;
background-color: #EDEDED !important;
}
Remove display: inline - that will cause problems with setting a size. The element needs to be block level to specify the size.
Also, the CSS can be simplified:
.menu-header .menu-item{
margin: 0 50px;
border: 2px solid #000;
width: 150px;
height: 50px;
background: #EDEDED;
}
display:inline and width 150px collide with each other.
An inline element has at every time the width of it's content.
You could set the display to inline-block when you really need it inline or else to block.
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/