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.
Related
I collapsed with problem that devtools for mobile looks ok, but when I open project on iphone main image crashes and appeared only 1/4 of its size. Which properties I should add to make it adaptive on iphone?
Here is css code:
.main-page__background {
background-image: url("../../../images/main.jpg");
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
transition: opacity 0.4s;
background-color: #2a2c2f;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}
you could resize your image for mobile screens and make a copy of it, then change the background image in a media query.
#media(max-width: 400px){background-image: url("../../../images/new smaller image");}
I'm working on this site on wordpress. Overall the design works well while viewed in mobile phones, But the header image doesn't resize along with the text which is over it.
"http://bodyinbalancenewyork.com/"
Is it caused because of css media queries? Help!
Below style is applied to the header image,
.vc_custom_1457453060838 {
margin-top: -60px !important;
border-bottom-width: 15px !important;
padding-top: 200px !important;
padding-right: 150px !important;
padding-bottom: 150px !important;
padding-left: 150px !important;
background-image: url(http://bodyinbalancenewyork.com/wp-content/uploads/2016/02/nyc-chiropractor.jpg?id=969) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border-bottom-color: #020202 !important;
border-bottom-style: solid !important;
border-radius: 4px !important;
}
The problem is that using Javscript styles are being applied to the header and bootstrap is not used inside the header. That is why it is not responsive on the mobile phones.
Ive got this site I'm working on, trying to make it responsive, and so I have this div ID that appears once a certain width is met on a mobile device, here is the CSS
#mobilenavbuttons1 {
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") repeat-x 0 0 / 100% auto rgba(0, 0, 0, 0);
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}
This button shows up in every browser, even chrome, but when I open it in safari, its just empty where it should be. I try using the debug tool in safari and i can't even see the image background being loaded when I glance at the styles section of the debugger.
I've read tons of articles and posts on Stackoverflow about this but none of the solutions have worked. I've tried png, gif, quotes, no quotes (around the image), even putting the background size on another line and not in the same call as the image, nothing has worked. any thoughts?
Figured a solution, I think it has something to do with that backslash/format of how I wrote it on one line. this does the trick though:
#mobilenavbuttons1 {
display: none;
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") rgba(0, 0, 0, 0);
background-size: 100% auto;
background-repeat: repeat x 0 0;
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}
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/
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/