In my website and in this page I have a background image for my page. This background image must be fixed. This page works correctly in Firefox, but doesn't work in Google Chrome . the background image css is like this :
.aboutBG {
position: fixed;
width: 100%;
height: 100%;
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: 10;
}
I searched around the web and find some answers like this for using code like below :
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
but it doesn't work
You can not apply background image to div make some good logic
Your css should be looks like
html, body{
height: 100%;
width: 100%;
background-image: url(http://justbeecosmetics.com/img/headImage.jpg);
background-attachment: fixed;
}
#blank{
height:80%;
}
#top{
height: 70%;
background-color:blue;
}
#bottom{
height:50%;
background-color:red;
}
Please check the fiddle here
http://jsfiddle.net/jdmitz/V8WqE/
You have added to wrong position
Easier would be to add:
#container {
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Related
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
I use:
<style>
body {
background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
background-repeat: no-repeat;
background-size: contain;
}
</style>
in an attempt to have a background image that always stretches to show the whole image but as I test this, the image turns to be way to small... What is the matter of this?
You need to give the body a height.
html, body {
height: 100%;
}
body {
background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
background-repeat: no-repeat;
background-size: contain;
}
Or you can add a "background div".
#bkg {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
background-repeat: no-repeat;
background-size: contain;
}
<div id="bkg"></div>
This will show the full resolution of the image by taking out background-size:contain
Results
I have an image that I am showing on a page. Here is my css:
body {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:
<body>
<div class="background-image"></div>
</body>
And here is my new css:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?
It's because the div is 0 pixels tall, give it some height, for example:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: 100vh;
}
Since you are only using background you need to set a height/width on the div itself.
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: */Your Value/*;
}
I would suggest remove background-size: 100%; .. instead add height and width as 100%.
body {
background: url(./../imgs/beach.png) no-repeat;
height: 100%;
width: 100%;
}
I set the body to:
body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;}
and it displays my background but when i set this code:
body {
z-index: -1;
background: #425b77; }
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
it just would not display the background and instead just displaying the color i set on the body tag.
Any idea how to solve this?
Edit:
When i look at this code on another webpage i have it works correctly and i have written the exakt same thing.
This is my result from code at the second line:
https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
This is the result i get from the code at line 8 and downwards:
http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Edit:
If i add content inside the <div id="myBody"></div> then it will be blurred too because i want a blur filter on it.
try this :
body {
background: #425b77; }
#myBody {
background:url(your picture) no-repeat center center scroll;
background-size: cover;
-moz-background-size: cover;
width:50%; height:50%;
display:block;
position:fixed;
z-index:1001;
}
this is just example... change position width and height as you wish
You forgot to add Height and Width (or add the content do that div).
I want to make one image the full background of a website! I know it sounds pretty simple, but it just got me crazy, it doesn't fit the page, this the last try I reached with!
CSS :
body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
I'm using Twitter Bootstrap as well, but the thing is even without that I can't get it right!
Any help would be appreciated.
EDIT: and I didn't use exact pixels because I'm trying to make a responsive + mobile design.
I don't know why they downvoted the question! But this is how I solved it!
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mybody {
background: url('images/bodybg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
#myheader {
background: url('images/headerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
EDIT: I created a DEMO with some unnecessary things removed. This has the benefit of not windowing your background picture. The DEMO works but was not as extensively tested as the quoted code below.
I recently worked on a project where we needed this exact thing. I'm posting from my project files, so some of this may be unnecessary as it was a team member that wrote this.
Start by setting properties of html and body.
Then, I have a root div inside body called background.
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#background {
background: #000000 url(urlHere) no-repeat bottom left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
Again, some of that I'm sure is unnecessary, but I hope it helps.
You can do this by adding property background-attachment: fixed;
body {
background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
DEMO
But you must know that if ratio of page dimension and image dimension are diferent then image can be cutted in window.
EDIT
If for you height is more important change parameter backround-size to containt:
body {
background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
background-attachment: fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
Contain Demo
Why not import the img's into Flash (Microsoft Program) and convert the img's into Vector IMG's (Vector: Images who's quality isn't effected (as much) when Altering the height and width.) After making adjustments to the vector img (changing the img to the resolution of your current platform) save it and apply it to your HTML. I would advise making a backup copy especially if your cross platforming you HTML for different resolutions.
You need set the height for first element of page.
html, body { margin:0; height: 100%;}