I've got this snippet in my <body>:
<div class="hero">
...content...
</div>
Nothing too special I figured. My CSS contains a "background:" in the class for the image. The CSS looks like this and it works:
.hero {
position: relative;
background: url(http://www.example.com/img/background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #ef4d39;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
left: 0;
width: 100%;
}
But when I change it to this (one of the many ways I tried to make it local instead of absolute) it doesn't work:
background: url("img/background.png") no-repeat center center fixed; //Should be the proper way
background: url('img/background.png') no-repeat center center fixed; //Found it with single quotes in tutorials as well
background: url(img/background.png) no-repeat center center fixed; //No quotes since the original snippet doesn't contain quotes
background-image: url("img/background.png") no-repeat center center fixed; //Found this tag in tutorials as well
I'm quite flabbergasted (but I'm not that quite of a programmer as well) but I can't figure out why the original line works and the other lines I tried do not work. This was tested offline. Can anyone explain why and how I can make it work for relative images?
Edit:
Thanks to the comment of DBS I figured what was wrong, the right context should be:
background: url("../img/background.png") no-repeat center center fixed;
The .css is in a subfolder "css" and the image is in a subfolder "img". Thanks for the help you guys!
I recommend you no put these images at the same site, maybe they there are but you can't see them.
You must attach this images on html (look for img tag), inside your div, then you can put that in css for each one in addition would be nice set this orders apart. Try that:
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
Surely you was seeing just one, but there was all of them use your browser debugger to check if they are there (press f12).
I hope I have helped.
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 creating a form on my page with bootstrap css.
I use an image as background which covers the entire background.
bootstrap seems to add a semi-tranparency to the top of my page, which disappears when scrolling the page: http://www.landoflove.be/medewerkers.php and I can't seem to find out why it's doing that. It does the same thing on the main page landoflove.be .Why is this happening and how can I disable it?
Your html code is invalid. There's no doctype and you have unclosed div somewhere. Fix this first, then add:
html, body {padding:0; margin:0}
Check this CSS in your landoflove.css file
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The problem is here
background: url(../img/bgoff-min.png) no-repeat center fixed;
Your image is having the size of 1227 X 1159 pixels. and you have added no-repeat center fixed
if you remove that you will have the background to be stretched something like this
Also, you need to modify the HTML
Seems that you are using only one
<div class="row"></div>
and all your form elements are inside this which is not a right approach.So suggesting you to have one form-group in one row
the mark-up was indeed invalid for some tags because is was a work in progress.
I seem to have found what my particular problem was:
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The height: 100% caused the problem. Now the transparent layer is indeed gone, but i still have no clue why it added such tranparency in the first place.
I'm really new to coding and I am having some trouble.
I want to put a background image under all of my page elements that fits the entire screen. But when I try to do so the white coloring that is apart of all of the p's and h's that I've added overlap the image making the page look funky. Only part of the page gets the background image.
Here's the code I added to the css file.
html {
background: url('imgurl') no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
The html and css files are undoubtedly linked. Also, I used imgurl in my example code, but the actual code links to the right url.
Can't tell without showing a fiddle.
My guess will be doing this so it removes the background on the elements you mentioned.
h1, h2, h3, p {
background: none;
}
one of the easiest ways to accomplish this is to use the following css
#backgroundImage {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
and here's a fiddle: http://jsfiddle.net/usrp7yom/
First off, I'd like to say that I have found this thread: "background-size: cover" does not cover mobile screen.
I have read through the responses in that thread and have tried them, to no avail.
Here is what the browser version of the site looks like:
http://i.imgur.com/dmNWq.jpg
And here is what the mobile version looks like:
http://i.imgur.com/KGJ8247.png
(please bear with me, as I cannot post images due to having low rep.)
Relevant CSS:
.splash {
z-index: 1;
list-style: none;
margin: 0px;
padding: 0px;
background: url('../assets/splash.png') no-repeat center center fixed;
background-color: #159957;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
min-height: 100%;
}
Basically the problem is that the image won't correctly size on mobile, even with the correct overrides in place. I do not know what path to take, and any help would be appreciated!
Instead of: background: url('../assets/splash.png') no-repeat center center fixed; you should use: background: url("../assets/splash.png") no-repeat fixed center center / cover;
Why?Because according to W3 if you want to include the background-size value in the shorthand syntax, you need to:
Explicitly include background-position values even if these are the same as the defaults (see above).
Write background-position values before background-size values.
Put a slash in between these two pairs of values because without it we cannot distinguish which values are for which
I am attaching the 2 sample images I am using so you can get the idea.
This is the body background:
This is the fixed position div's background:
And above those two there is the content. The whole website. Between those two there are some moving stars in pure css with no interaction.
But here comes the problem. While the user scrolls the fixed background breaks in parts, stucks in positioning and sometimes the body background image disappears and shows only color in the back - all that while scrolling.
body {
font-family: 'LatoRegular', 'Lucida Grande', Helvetica, sans-serif !important;
line-height: 21px;
color: #636e7b;
overflow: hidden; /*removes it after preloader quits*/
position: relative;
background: #1d2939 url("../images/backgroundv2.jpg") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
}
#fix {
background: transparent url("../images/backgroundv2.png") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
-webkit-transform: translateZ(0);
}
Any idea will be appreciated.
(This is the bugged version http://i.imgur.com/bn0fG3j.jpg while scrolling)
well, I played around with your code,and it works as you intended, I would probably have done it in some other way, the code seems a bit messy but it does what you trying to achieve, check this fiddle:
http://jsfiddle.net/domusnetwork/Lkrkp/
and maybe tell me if I misunderstood you.
anyways..
I think that your problem comes from the elements you've stack on top of your background,
try using the next code snippet, it's worth a shot:
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;
}
and if that won't help try implementing one of the techniques in the next article:
http://css-tricks.com/perfect-full-page-background-image/
have a nice day :)
Thank you for the answers.
Fortunately I've found the problem. It was the moving stars. They were made by idea from codepen's author using simple css with massive ammount of box-shadows as dots in 3 divs (sizes). Due the high ammount of stars it requires a lot of painting on the page while scrolling. When I removed one of the star sizes the scrolling is fine, the background stopped disappearing and it's all fine.
Seems like performance has to be above all.