I've been sitting here for about minutes trying to figure out why my css background is not showing up on my wordpress blog. All of the other css code works in the style sheet. I can't figure out what's wrong.
Here is the code.
body {
background-image:url('http:/www.itsnotch.com/images/itsnotchbg.jpg');
background-color: #000;
background-repeat:repeat-y;
background-position:top center;
font-family: Arial, sans-serif;
}
It shows up in all other browsers EXCEPT internet explorer.
The url to the background image is wrong: it's missing a / after http:
You're missing a / in your URL. It should be
background-image:url('http://www.itsnotch.com/images/itsnotchbg.jpg');
and not
background-image:url('http:/www.itsnotch.com/images/itsnotchbg.jpg');
Well, you've declared a background-color and a background-image . You need to choose one. By default browsers use the last declaration. So in this case it would be your background-color showing and not your image.
Are you just seeing a black background for this?
try
background-image: url(http://www.itsnotch.com/images/itsnotchbg.jpg);
Related
I cannot get this background image to display on the body or any divs at all on my wordpress demo site. I have tried everything from adding !important to the css, to changing the css into an id and class in an effort to get it to display. I also uploaded it to a remote server to see if my local server was the issue, since it worked on the static site before. No matter what I’ve done, it shows as grayed out in the inspector. I’ve even looked on Firefox to see if it was a Chrome issue.
Image of my Inspector
Here is the code I am using:
body{
background-image: url(‘wp-content/themes/jjspizza/assets/images/tie-dye_fade.jpg’);
background-size: cover;
font-family: ‘Open Sans’, sans-serif;
}
And here is the code on the live server: https://demo.jjs-pizza.com/
I’m sure it’s something incredibly easy, I just don’t know what else to try. Thank you in advance for any help!
This is how it will work. As a result, it should be like this:
background-image: url('../assets/images/tie-dye_fade.jpg');
the complete body tag code should look like this:
body {
background-image: url('../assets/images/tie-dye_fade.jpg');
background-size: cover;
font-family: 'Open Sans', sans-serif;
}
mostly like above background-image: url('../assets/images/tie-dye_fade.jpg'); it will work if not remove that "../" so it will be work
body {
background-image: url('assets/images/tie-dye_fade.jpg');
background-size: cover;
font-family: 'Open Sans', sans-serif;}
if style sheet any css folder you have to use ../ else you have to use just like this assets/images/tie-dye_fade.jpg
I have a tileable wood pattern as background in an html page. The background looks perfectly seamless when viewed in Photoshop or any other software, but on the html page it looks discontinuous at the points where my main div element begins and ends.
Here's a preview: http://i.imgur.com/eTQthA2.png
This anomaly persists across different browsers. (I have tested in latest versions of Firefox, Chrome and IE.) What could be the reason behind this?
Let me know if you want to look at a specific part of the code.
Edit:
Solved the problem. When asked to post the CSS I noticed that I used the selectors body, html to apply the background-image. Removing html from the selector did the bit.
CSS:
body, html {
margin: 0;
padding: 0;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
color: #455d76;
background-image: url("images/bg.png");
background-repeat: repeat-x repeat-y;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}
First of all whenever asking a question, you should post your code here and not give link to a preview image or your website, because it makes us tough to solve your question.
Coming to your question, from the image it looks like you are using background-image property for different element like say for example div for header, main, and footer, so instead declare that property for body tag instead, in your CSS
body {
background-image: url('whatever.png');
background-repeat: repeat;
}
Fixed the issue. I had used 'body, html' as selector while specifying the background property. Removing 'html' from the selector (ie, leaving just body) did the bit.
(Thanks Mr. Alien, you were right about the background-image property being declared for different elements, ie, body and html in this case.)
Thanks to everyone who answered/commented. :)
i use Allegro fonts for top menu and got problem when i hover on it the color not display full width in Chrome and Safari :(
you can test on this link
http://preview.86solutions.com/fairpart
There is something wrong with your font I guess.
When you add some more padding-right to the element it looks fine.
.menu a {
color: black;
padding-right: 20px;
}
see it yourself:
Add a border to the element and it will cut off on the right side.
Looking okay in both chrome and IE.I don't know what version are you using now, I have checked this demo in chrome 19.0.1084.82 and IE8 and IE9.I have seen your code and everything looks good.
BUT, IE does not support the font-family inherit property.If you still have the problem you should modify your style.css like this :
.menu a:hover,.menu a:active {
font-family: "Allegro"; /* because IE doesn't suprort inherit */
text-decoration:none;
color:#c4c04d;
}
Hope it helps !
I have this in my HTML everything works except the background-image: 'images/Header.jpg';
Instead I see the grey color in the header but not the image.. I tried removing the grey color but still dont see the image...
#outerWrapper #header {
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
height: 115px;
background-color: Grey;
background-image: url('images/Header.jpg');
How can I make this work.. please help.. thanks
What is the path of your CSS file and the path of the image?
You must take in account that, when using url() in CSS, the path is relative to CSS file, not to the requested page.
Imagine you have the following files:
/website/index.html
/website/templates/main.css
/website/images/header.jpg
than the CSS must be:
.style{background-image:url(../images/header.jpg);} /* Noticed "../"? */
Have a look at your page with Firebug for Firefox. You may not be loading the image properly. You will also be able to play with the css on the fly if that's your issue.
Try changing the url to '/images/Header.jpg'
Sure you need the ' char? And maybe it is case sensitive and you have a mistake in the url..
Maybe background-image:url(images/header.jpg);
How can I get the Microsoft.AlphaImageLoader to work??
I am trying the following:
.navHeader
{
/*Alpha Loader*/
background-image: none;
background:transparent url('../../../../commondata/sharedimages/summary/NavBox_topMiddle.png');
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../commondata/sharedimages/summary/NavBox_topMiddle.png',sizingMethod='scale');
text-align: center;
font-family: Arial, Helvetica, san-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
line-height: 16px;
}
This has no effect on the PNGs (they are not transparent).
I think what you're doing is specifying the background image and then applying the filter over the top of that. You need to NOT specify the background image for IE6, and only apply the filter.
Otherwise you get the background image (without PNG transparency) and then you apply the filter over the top of that - effectively showing two PNGs but only the top one is transparent.
Also, double check your src path for the filter - I believe it works it out differently than CSS url paths (i.e the path is relative to the location of the page, not the CSS file)
I've had so much headache trying to get IE6 PNG support, until I found this: http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's a simple fix, and works well for everything I need. Hopefully it works as well for you!