I am new to html/css and I do not understand why my background image is not showing up. This is part of a simple test CSS sheet and HTML code for a simple site. I am trying to add a background-image and I have done this once and it worked and I do not know why it does not work now.
body{
background: url (rio.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
This is part of my css sheet. THe url works, I have used it for another trial site before. And my html is just a regular html document with a body etc..
CSS is picky about functions.
You can't have a space after 'url' and the parenthesis.
Correct:
background: url(path/to/image.jpg);
Incorrect:
background: url (path/to/image.jpg);
Here's a fiddle demonstrating:
http://jsfiddle.net/tJmmn/
You can try doing the following:
background-image: url(http://www.example.com/images/bck.png); // absolute path
background-image: url(rio.jpg); // relative path
If you are stating that the path is just rio.jpg, the image should be in the same directory as the stylesheet/where you are declaring the background.
If the image is in an image directory, you may need to go up a level as follows:
background-image: url(../images/rio.jpg);
Depends where the image file is located. You can refer to following for further information: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Hope this helps!
Haha I had the same problem, make sure you have the right ".png" or ".jpg"!
After all my searching, the problem was I had a file called "bg.png", but I was typing in "bg.jpg"
Had the same issue. I used "background" and instead of "background-image".
Secondly, make sure that the element that has the background e.g a div tag is not empty, else the background image won't show
This problem occurs if you are trying to give the height of the background image in %. If you give that in px it should work and if you still want to give the height in % i.e. 100%(generally) than add this in css:
body{
margin: 0;
padding: 0;
positive: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This should work as well.
Related
Heres my website: www.ChrisStephensMusic.net
As you can see the background image is not full size and moves when the page is scrolled. I'd like it to be full size and remain still while the content scrolls. I've tried the CSS suggestions I could find when searching this topic here but they do nothing when I add them to the "Custom CSS" on Blogger. Is there a better way to fix this using HTML or is there something else I need to do to get the custom CSS to be recognized?
Try using this code in your css file for the background image:
width: 100%;
background-size: cover;
background-attachment: fixed;
CSS
html {
background: url(image.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
source: https://css-tricks.com/perfect-full-page-background-image/
Add the following CSS -
.bg-photo-container, div.bg-photo-overlay {
height: 100%;
position: fixed;
}
The custom CSS option is not working because some invalid rules have been added to it, which is causing every rule after that to be ignored. I would instead suggest, adding this via HTML/JavaScript gadget by wrapping the code in a style tag so that it looks like
<style>
.bg-photo-container, div.bg-photo-overlay {
height: 100%;
position: fixed;
}
</style>
The final result should look like -
I'm trying to add a fixed background to ONLY this section of my web-page.
When someone scroll down to another section, I'll add background color, not image.
I dont know how to explain this, so I made a demo on my website:
demo
image explanation
I already tried this:
.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url(" IMAGE URL IS HERE ");
}
My html code (without this css above this):
That didn't work execly on way I wanted, so I uploaded demo with that too:
demo
PS. Ignore russian phone images, I was just testing something.
I tried some other css tricks but nothing worked correctly.
Thanks.
Since the question is answered correctly, demo was removed. Thanks!
Here it's work fine: http://csgotale.com/stackoverflow-demo/index-with-my-try.html
but, add to your html,body and h1 margin: 0; padding: 0;
If you wanna make Parallax Effect, i do it here: http://codepen.io/powro01/details/pEBBgR/
I guess you won't be able to achieve this effect using only CSS; you will need some amount of JS code.
They're not quite what you're looking for I'd recommend looking at these to see if they help:
https://github.com/razorfish/Parallax-JS
https://github.com/cyntss/Parallax-img-scroll
I used this code for background image of <body> :
background: url("http://www.uplooder.net/img/image/39/45732833fc8fdcfd8277ca248d5b608f/QHD.jpg") no-repeat center center fixed;
This image acts really important for my website that if it misses, the whole site will be ugly.
How can I define another additional link so that if the server in which the image is uploaded stops working, the the image gets fetched from the other link?
With CSS 3 you can set multiple backgrounds so if one fails to load you got other one as backup
body {
background: url('http://placehold.it/1920x860/ffffff/000000'), url('http://placehold.it/1920x860');
height: 100vh;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
}
First background image fails to load here so the other one shows
body {
background: url('http://placeholdasdf.it/1920x860/ffffff/000000'), url('http://placehold.it/1920x860');
height: 100vh;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
}
I recommend using JavaScript.
Leave one image as default in the css like you have it. Then, once the page is loaded, make a GET request using jQuery to that image. If it returns a 404 error, then repeat for the next image. When it finally finds an image that doesn't give a 404, you can again use jQuery to set that as the background image.
Download the image and put it in your server.
If you don't have the rights, you shouldn't use it either way.
I have a problem with full width background image. Sometimes is loaded ok, but not always. Can I prevent this? Is possible, this is in the images size or file kind?
My css:
.claim1{
background: url(../img/naruc.jpg) center center fixed #222;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
height: 360px;
position: relative;
}
Demo is here:
http://martinurbanek.cz/demo/bananaclouds_theme#claim1
Thanks forward for your help
I'm not being able to replicate your problem but I guess maybe you would be facing problem due to some CSS issues.
I suggest you use jQuery to set you background image as,
<script>
$(document).ready(function(){
$('myOjbect').css('background-image', 'url('../img/naruc.jpg')');
});
</script>
The reason to use jQuery here is that the ready() function will be executed only after the entire document is loaded and hence it proves reliable.
Another reason for using jQuery is that it handles cross-browser issues very well and hence you don't need to add multiple lines to set the background image.
This may or may not affect anything depending on your setup but have you tried adding a width property of 100%?
width: 100%;
I'm new to Bootstrap 3 (part of the problem), and I'm trying to set up a quick portfolio site for a class. I'm using the One Page Wonder starter template from here: http://startbootstrap.com/one-page-wonder. I've got a problem with the one-page-wonder.css stylesheet. I'm trying to change the header image from the placeholder, and I added a style for an essay, but neither change shows up when I drop it onto the server. I have deleted the entire bootstrap folder on my server and reuploaded it, but whenever I go to my page and check the code, it shows the same placeholder image and the same old style sheet. Here's the style I want to use:
.essay {
text-indent:50px;
}
.header-image {
background:url(/images/Fire.jpg) no-repeat center center cover;
background-position:top;
height:auto;
display:block;
width:100%;
text-align:center;
}
Here's a link to the page: http://jonathanalumbaugh.altervista.org/courserequests/photographyone.html
It's really annoying, I've looked through all the code, but it always reverts to this placehold.it thing. I've tried clearing out cookies, cached images, and files, but to no avail.
You're applying your CSS style incorrectly. You are passing an invalid value to background-image - that property expects only the URL to the image.
You are looking to set the background property, which is a shorthand property for multiple other properties. You can use it like this:
background: #000 url(/images/Fire.jpg) center center no-repeat;
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background
You should always ensure your CSS is valid:
http://jigsaw.w3.org/css-validator/
Note: Your image still can't be found. Where is it?
You can't include cover in the background shorthand, you need to do something like this:
html {
background: url(/get/the/right/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}