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%;
Related
I have a Django site, and when I run it on my local machine everything is fine, but when I make it to pythonanywhere.com one little problem appears: somewhy and somehow my background image doesn't want to fill the whole page even though it does on my local host (using the same browser, so the problem is not here). Basically I don't mind changing the aspect ratio, I just want each pixel of the background to be fully on the screen, would it be either 600x400 or 200x2000.
body {
background: url("images/classes.jpg") no-repeat center center fixed;
background-size: 100% 100%;
}
It seems to me like {background-size: 100% 100%} just... doesn't work?
I tried to switch percents to 100vw 100vh, but the output was literally the same.
Page itself: http://seltsamermann.pythonanywhere.com/classes/
Image itself: https://i.ibb.co/0G86wL2/classes.jpg
I wonder what might be the problem.
(in case that might help somehow)
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/templates/main/classes.html
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/static/main/style_classes.css
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. Use this propriety for the image in your css, or the container that stores that image.
object-fit: cover;
For more : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Try this:
body {
background: url("") no-repeat center center fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Well, basically I just outplayed myself; the real problem was the version control, I just missed several things. Code in the main post works totally fine.
Here is what I am looking for: http://tinyurl.com/oe3ydvr. No matter the size of the window the html adjust's to fit and appear perfectly. I have examined the css code but I still can't figure it out. I read somewhere to do as follows:
<style>
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
</style>
Everything I have attempted has fallen short. I would really appreciate some closure on this issue, Thanks jmr333:)
well, there are a number of things going on here, the main slider container slider1_container is being ajusted to pixel-size that fits the viewport with javascript (with an img tag inside). The text blocks are not text, but images and scaled that way - a very bad practice from many standpoints. Your code relates to how a background image could scale "in a good way" while resizing the viewport
You can't style the background of your site like shown in your sample code, with properties directly on base level of your script tag. You always have to style a particular html element, i.e. div, or body or html, and assign properties in that context:
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See w3schools for examples on the background attribute.
In the mentioned site, there's actually complex javascript at work to style the top banner's (#slider1_container) width. This is easy to spot, because its inline css attributes get dynamically adjusted, while you change your browser window's width...
As a much simpler start, start with max-width: 100% as shown here.
I am guessing, most likely you'll want to start with a particular 100%-width-div (and certain elements on top), not the overall page background. (There is no need for javaScript on these basics )
I'm facing this trouble for quite some time now, have tried n number of options but still no luck.
I have this background image :
Which I want to make as the background of my website. I added it as a full sized background, but I don't know why it always gets resized and becomes something like this.
Here's my css code for the background image.
body
{
background: url('../images/home.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm really unsure how to fix this! Please guide me in the correct way.
The background-size: cover property in CSS3 stretches your images to fit the background of the element you have specified, which in this case your body.
Edit: As others have mentioned, using background-size: contain would give you the most desirable result as it is defined by the following:
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
The link below also has other properties that may give you your desired results:
Source:https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Try to use background-size:contain instead of background-size:cover. Maybe that is more appropriate.
If you want to keep your image in proportion you would want to use
background-size: contain;
However the issue with this is it will keep the background in proportion, so if your window is not the same proportions you will have white space around. Building off #Sebastien 's fiddle I can show you what I mean -
http://jsfiddle.net/j0n19rw5/5/
You could try re-sizing the image itself to work better with contain.
But if you want it to cover the background you would probably be best using cover. One trick is to crop the image to the space (if you know a general sizing).
You can get away without stretching it too much with a method like this one :
https://jsfiddle.net/r3qpe4dm/1/
But it will still cut off your image at smaller sizes.
To be sure, split the background property for each sub-attribute :
body
{
background-image: url('http://i.stack.imgur.com/ZQinh.jpg');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
http://jsfiddle.net/Paf_Sebastien/j0n19rw5/1/
Edit:
Add this to your CSS since your HTML/body seem to have a low height:
html, body {height: 100%;}
This may have been asked before, but I am doing an html project and I need to have a fixed background with everything else scrolling. All the solutions I have come by involve javascript of Jquery and I would like to not use either but if it is the only way I might have to. (keep in mind i have very little coding experience with javascript or Jquery)
One example of a fixed background with scrolling content like i intend is shown here.
http://www.teamunify.com/Home.jsp?team=ohossc
-thanks!
You can, potentially, use:
background-attachment: fixed;
In concert with whatever other CSS you're using to style your content.
References:
background-attachment.
My friend, that is ultra easy, at least check the internet.
<div id="background-image">
<div class="your_content">
</div>
</div>
CSS
#background-image {position: fixed;}
No need for Jquery
This should do the trick:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Taken from here:
http://css-tricks.com/perfect-full-page-background-image/
Replace the url to the relative or absolute path of your image.
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.