Currently I use the following CSS to display background image with Twitter Bootstrap site:
html {
background:#505D6E url(/img/background.jpg) no-repeat center center fixed;
min-height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have to replace it with div since I can not apply jQuery animation to change one background picture to another. How should I create fullscreen div?
This creates a fullscreen div:
HTML:
<div id="fullscreen">
</div>
CSS:
#fullscreen{
border:1px solid black;
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Just use this:
<div id="backgrounddiv"></div>
#backgrounddiv {
position: fixed;
left: 0;
top: 0;
width: 100vw;
z-index: -999; // has to be below your lowest z-index
}
and then use <img> with width: 100% and height: 100% (or whatever you want) inside.
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.
Been playing around with CSS and for some reason I can't get the image to cover the whole screen. I managed to dip the opacity but the image won't cover the screen.
<div class="backgroundImage">
<img src="Image/BackgroundImage.jpg">
</div>
.backgroundImage{
opacity: 0.4;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
However if I use the code below I can make it to cover the whole screen, but the opacity won't dip. So for some reason it is not working on a div.
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;
}
You can combine multiple background images and stack them above each other. But then there is no way to control their opacity.
.backgroundImage {
background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
background-position: center bottom, left top;
-webkit-background-size: 80px 60px, cover;
-moz-background-size: 80px 60px, cover;
-o-background-size: 80px 60px, cover;
background-size: 80px 60px, cover;
background-repeat: repeat-x, no-repeat;
width: 100%;
height: 100vh;
}
In your case the img tag is not closed. It should look like this <img src="Image.jpg">.
Further you can not specify the dimensions of an img with background-size: you should use width: and height:.
You can use CSS pseudo elements of either :before or :after and set the background image + opacity to it. You can either set everything to height:100%, or just use height:100vh on the div directly in order to make it to cover the whole viewport height.
Jsfiddle Example
body {
margin: 0;
}
.container {
position: relative;
height: 100vh;
}
.container:before {
background: url("https://unsplash.it/500") center / cover;
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: -1;
opacity: 0.5;
}
<div class="container">Yes!</div>
Here is a demo of it: https://jsfiddle.net/a1wvdpwc/17/
I think that's the effect you want?
Just give the background div a width and height of 100%, and give it a position of fixed. Then give it a Z-index of very low so it stays at the very back. You then need to also give the image a height and width of 100%, so that it fills up the viewport. (In the demo I used vh and vw; which mean viewport-width and viewport-height, as percentages. )
Also the demo is in scss, but the only difference is that the css Img placed inside the backgroundImage styles uses a descendant selector, so it targets all Img elements that are descents of div.backgroundImage. I've put what the compiled css would look like in this answer.
Also sorry for the lack of indentation. I typed it up on a phone. I'll update it with a neater version in a few hours.
The html is:
<div class="backgroundImage">
<img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
Content here
</div>
The css is:
.backgroundImage {
Position:fixed;
Top: 0;
Bottom: 0;
Width: 100vh;
Height: 100vh;
Opacity: 0.25;
Z-index: -5000;
}
.backgroundImage img {
width:100vw;
height: 100vh;
}
.content {
padding: 30px;
}
Also I forgot to add, (to the best of my knowledge) this method is not too good for semantics, but it shouldn't be too bad if you use it.
I'm building an one page scroll down type website, where each slide is a page.
In the last slide, the background image is somehow geting cuted and there's just a white space. The css used on the id of that slide:
#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }
Here's a print:
http://postimg.org/image/489mxfagt/
Any solutions?
You can use background-scale property:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
If you're supporting modern browsers, you can do the following.
#seven {
background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */
}
Alternatively, you can put your image in an img tag within a container, position the container using either fixed or absolute positioning. Next, give it a width of 100% and height of 100% or top, left, right, bottom a value of 0, while hiding the overflow. Lastly, set the img width to width: auto and height: 100% with display: block.Example here.
using css background image
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;
}
else you can try some other way below code works fine from ie7
css code
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position:absolute;
top:25%;left:25%;
right:25%;bottom:25%;
margin:auto;
min-width:50%;
min-height:50%;}
html code
<div id="bg">
<img src="images/Body-bg.png" alt="">
</div>
Just add .bgwidth { width: 100%; }
.bgheight { height: 100%; }
this will eliminate issue
I've tried changing the pixels to percentages and nothing seems to work. If I make it in 1920x1080 and then switch to a lower resolution the website looks all cluttered and weird.
Here's the CSS code:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Here is what it looks like on a different resolution: (The correct way would be centered)
http://puu.sh/6RgHg.jpg
EDIT: HTML part:
<body>
<div id="header">
<div class="headerImage1">
<img src="images/Header.png">
</div>
I think it's cause your ratio gets off when you use:
width:100%;
height:100%;
Try this instead:
width: 100%;
height: auto;
That way the ration doesn't mess up, if you want the background to not mess up, try this:
background: url("images/Background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
EDIT:
If you mean centering the image, absolute poitioning is the absolute size of the browser, the full screen. While relative is the current position of the brower.
I would use relative for cross-device purposes.
I have a webpage with a css style file.
When I try to scale the header2.png in the code below, the picture gets cropped instead.
Any idea Why?
#header {
background:url(images/bg.gif) repeat-x 0 0;
height: 70px;
position: absolute;
}
#logo a {
background:url(images/header2.png) no-repeat 0 0;
width: 800px;
height: 80px;
position: absolute;
top:0;
left:10;
}
You need to use the background-size CSS property in order to get the picture to scale. One option you can use is to get the image to cover the header proportionally, like this...
#logo a {
background: url(images/header2.png) no-repeat 0 0;
width: 800px;
height: 80px;
position: absolute;
top:0;
left:10;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Of course, you can experiment with this by changing "cover" to pixels or percentages. For more information on resizing the background in CSS... visit http://www.w3schools.com/cssref/css3_pr_background-size.asp
Why don't you re-size your header2.png image to the size at which you want.