i Want my background image to completely fil in the browser window. I tried css
body {background:url(bg.jpg) fixed no-repeat 100%}
but its not covering entire screen.
css:
background-size: cover;
is what you are looking for i guess.
for cross borswer support try this:
CSS:
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;
}
source:
css tricks full page background
I use backstretch.js to fit backgrounds to window size. It's jquery, obviously, but it's very reliable from my experience.
http://srobbin.com/jquery-plugins/backstretch/
create an id for the img tag and the following formatting
#background {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 1;
}
If you want cross browser including IE try this method:
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
http://jsfiddle.net/Riskbreaker/A5ZNy/
Which is also mentioned in csstricks:
http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php
The CSS:
background: url(yourImage) no-repeat center center fixed;
background-size: cover;
This pins (fix) the picture andalso stretches it.
Related
this the code that i have written and it didn't work , my problem here is that code work but the image did not appear as it supposed to
.about-bg{
background: url(../img/about.jpg) no-repeat top center fixed !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
background-position: top center;
}
this isn't go well
this the result that i had
Can't tell from your question, but you must ensure body margins and padding are both set to zero if you want any element on the page to cover the entire page.
If this element is contained within another element, that element must allow the image of expand beyond its borders or that element must be full-sized too.
Here is an example that sets a solid blue picture as the background image within a div:
body {
margin: 0;
padding: 0;
}
.about-bg {
background: url(http://via.placeholder.com/150/0000FF/808080) no-repeat top center;
background-size: cover;
height: 100vh;
width: 100vw;
}
<div class="about-bg"> </div>
From the question I presume you want the image to take up the entire background. I tried your code on a few pictures it seems it is because the picture dimensions don't match the screen so try this code ans see if it helps.
.about-bg {
margin:0;
background: url(backpic.png) no-repeat;
width:100%;
height:100%;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
try removing !important. It should let you take 100% of width
Very new here and have never asked on this form before so forgive me for any confusion. I'm having an issue with a background image. It looks fine on my PC or when I turn my phone on it's side and view it in landscape; however, it's getting cut off and flat out not sizing right in portrait view. I can only get it to display the full image at the cost of white space at the bottom or the image being cut off. I've tried many of the solutions already posted on here to no avail. The three I posted here came the closest.
These cut off half the image but fill the screen in portrait view. However, they look good in landscape view.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
}
and
body {
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
}
this shows the full image but leaves the half the screen blank and explodes in landscape
body{
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vw;
overflow: hidden;
}
The image is 1920x1080. I've also resized the picture to 321x174 with the exact same results. Is this an image size issue? Is there a way I can get the image to display in the screen with no white space and without it being cut off? Please help I'm bashing my brains in with this.
Use code as below:
See fiddle
body {
width: 100vw;
height: 100vh;
background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try to use
background-size: 100% in your css i.e.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: 100%;
}
background-size: 100% applies to both height and width.
Additional Info
if you want to modify any one of them you can try background-size: 100% 50%;
you can read more about it here
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Hopefully this will be a quick question. I wanted to add an image to my landing page that scales to any screen. I found this code to be the suggested and most optimal method
html {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
However I am having problems implementing this. This code does what it is supposed to, however if I set it under html then this image takes place anywhere I call html in my site which I dont want. I want this to occur in one page of my site only. I tried creating my own custom html tag bodycover {} but that didn't work.
I am new to this and have not taken a step into custom html tags yet. I feel like there is an easy solution to this but I can't find it despite researching it thoroughly.
Thanks
EDIT: If there is a simply way to get this working without a custom element that would be even better. I simply don't know of one
Like #Paulie_D said, you don't need to apply this to the html tag; a standard div will work. Also, give the new element some dimension to width and height. Slightly cleaned up:
.bg {
width: 100%;
height: 100%;
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Make sure the parent element of .bg has a height and width of 100% as well.
Why not do like this, where you add an attribute or class to the body for the particular page.
This can be done either server side, using i.e. ASP or PHP, or client side, in the page load event.
Page to show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body class="big-bkg">
</body>
Page to not show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
</body>
I'd say: put all that stuff into body, not html
body {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can make it with a simple absolute div with width and height 100% just after the body tag and z-index lower than the main-container.
html,
body {
padding: 0;
margin: 0;
position: relative;
height: 100%
}
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg') no-repeat center center fixed;
background-size: cover;
}
.main-container {
position: relative;
width: 80%;
background-color: red;
height: 80%;
margin: auto;
z-index: 3;
}
<div class="bg"></div>
<div class="main-container"></div>
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 have a bg image for a div which itself is height and width 100% (i.e. it covers the entire browser window).
This image gets cut off the bottom though. I have already tried things like background-size: cover; and height: 100%; width: 100%. Nothing seems to stop the bottom being cut off. I tried resizing the src image itself making it tiny and the bottom is still cut off?
HTML:
<div id="des" class="full-window">
</div>
CSS:
#des {
background: url("bg.png");
background-size: 100% 100%;
}
.full-window {
width: 100%;
height: 100%;
}
you are missing background properties to fit image without cutting.
try this
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;
}