Background image in fullscreen - css

I use this code to show image full screen in my desktop
<style>
body{
background: url("under-constraction1.jpg")no-repeat fixed 0 0 / cover ;
}
</style>
but in mobile in Firefox browser a piece of my image is shown
how can I fix it?


Use this
body{
background: url("under-constraction1.jpg") no-repeat center center fixed
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


body{
width:100%;
height: 100%;
background-image: url("./images/under-constraction1.jpg");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}

Related

How to correctly scale a background image

I've got a 8192x8192 image which should be used as a background image. It shows the image but only the half and I've got no clue how to scale the height correctly.
My CSS code:
body {
background: url('../img/atlas.png') no-repeat;
background-size: cover;
height: 100%;
width: 100%;}

Is it what you want?
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

CSS Background Image Cut Off

I've looked at a other similar thread and can't seem to find the answer.
Look at the shield background image. It's cut off slightly at the top and bottom... I've tried a lot of things but I can't get it to display properly.
Here is the site http://revivedlife.com
Here's the css for the background image:
.hentry h2 {
background: url(images/post_element.png) no-repeat 0 -4px;
display: inline-block;
}

Try replacing your existing css with this:
.hentry h2 {
background: url(LOCATION HERE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure the background image looks correct, even on old browsers.

Have you tried background-size: cover;
I think the following code may help you :)
.hentry h2 {
background-attachment: fixed;
background-image: url("http://revivedlife.com/wp-content/uploads/2016/03/bg_body.jpg");
background-position: left top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Background image size cover not working in mobile browsers

I encountered an issue on displaying a site when in mobile. The images background size that is set to cover works well on desktop but when in chrome android phone it won't get full screen. I know this was asked before and tried them but no luck for me.
What I tried is:
html, body {
height:100%;
min-height:100%;
margin: 0;
/* The image used */
background-image: url('../images/bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
I also tried adding media query to display smaller background image to fit mobile screen but no luck.
Media Query:
#media only screen and (max-width : 500px) {
body, html {
background-image: url('../images/mobile-bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
}

Responsive Image Background

I have a picture as my background but I can't figure out how to make my code responsive such that the image stays consistent when I decrease the browser window.Here is my code:
body {
margin-top: 50px;
}
.full {
background: url(../melissa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

If you want a responsive background look at this SAMPLE
.full {
height: 500px;
background-image: url('image.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

This will make it responsive for you.
Just add the height and width to 100%.
.full {
position: relative;
width: 100%;
height: 100%;
background: url(../melissa.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Actually, I'm assuming .full is a div which contains the background you want right? if that's the case, the width and height set to 100% will only make the div that big, which may still not work as he's using 100% to the height and thus you would need to set 100% to the body or any other container that .full is in. You can just set the background-size: cover, background-position:center center, backgorund-repeat:norepeat, and just give .full it's height and width. That should make the backgound always filling the whole container.

how to make the background the same as the div size in css

I'm developing a website and I need to know how can I make the background the same size of the div in the css .. I'm trying to make the BG size auto but it doesn't works > So does any one know a solution for that
!!
Thanks

#header {
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;
}

Try:
{
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

Resources