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
Related
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. :)
How can i add a image background to my website?
body {
margin: 0;
background: url(background.png);
background-size: 1440px 800px;
background-repeat:no-repeatdisplay: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
I did that much but nothing shows up on my page. I'm a CSS beginner.
Updated:
body {
margin: 0;
background-image: url(.../img/background.jpg);
background-size: 1440px 800px;
background-repeat:no-repeat;
display: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
Put the background url in quotes.
It should be background: url('background.png');
See here for working demo.
You also have an issue with the background-repeat line missing a semicolon in between two statements. If your background is really tiny you won't see it because of that issue.
Just to update on the solution, among the other issues, the background file was being refrenced with .../background.jpg when it should have been ../background.jpg (2 dots, not 3).
isn't the problem the following line is incorrect as the statement for background-repeat isn't closed before the next statement for display...
background-repeat:no-repeatdisplay: compact;
Shouldn't this be
background-repeat:no-repeat;
display: compact;
adding or removing quotes (in my experience) makes no difference if the URL is correct. Is the path to the image correct? If you give a relative path to a resource in a CSS it's relative to the CSS file, not the file including the CSS.
Is your image on the same folder/directory as your css file? If so, your image url is correct. Otherwise, it's not.
If by any chance your folder structure is like so...
webpage
-index.html
-css
- - style.css
- images
- - background.png
then to reference the image on your css file you should use the following path:
../images/background.png
So that would be background: url('../images/background.png');
The logic is simple: Go up one folder by typing "../" (as many times as you need). Go down one folder by specifying the folder you wish to go down to.
Adding background image on html, body or a wrapper element to achieve background image will cause problems with padding. Check this ticket https://github.com/twitter/bootstrap/issues/3169 on github. ShaunR's comment and also one of the creators response to this. The given solution in created ticket doesn't solve the problem, but it at least gets things going if you aren't using responsive features.
Assuming that you are using container without responsive features, and have a width of 960px, and want to achieve 10px padding, you set:
.container {
min-width: 940px;
padding: 10px;
}
If you add the following you can set the background colour or image
(your css)
html {
background-image: url('http://yoursite/i/tile.jpg');
background-repeat: repeat;
}
.body {
background-color: transparent;
}
This is because BS applies a css rule for background colour and also for the .container class.
And if you can't repeat the background image (for esthetic reasons),
then this handy JQuery plugin will stretch the background image to
fit the window.
Backstretch
http://srobbin.com/jquery-plugins/backstretch/
Works great...
~Cheers!
body {
background-image: url(your image link);
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-color: #464646;
}
For more modularity and in case you have many background images that you want to incorporate wherever you want you can for each image create a class :
.background-image1
{
background: url(image1.jpg);
}
.background-image2
{
background: url(image2.jpg);
}
and then insert the image wherever you want by adding a div
<div class='background-image1'>
<div class="page-header text-center", style='margin: 20px 0 0px;'>
<h1>blabaaboabaon</h1>
</div>
</div>
The problem can also be the ordering of your style sheet imports.
I had to move my custom style sheet import below the bootstrap import.
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);
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!