All geek questions in one place

CSS full screen responsive background

I want to make this image as a background image of my web page. However, the problem is that the image does not cover the entire page, as you can see in this preview , and this is repeated at the very right end. Is there a way for the image to span the entire page (whether in any way, stretching, redrawing, or something new).

My code is:

<!DOCTYPE HTML> <html> <head> <title>Angry Birds Star Wars</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style> body { background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png'); } </style> </head> <body></body> </html>

Thanks.

UPDATE:

Now I finally came to the conclusion that almost nothing works out so that this image can exactly match the screen of my PC. I'm fine now, and I'm moving forward, please do not send answers now.

+4
source share
5 answers

jsBin demo

 background: url(image.jpg) fixed 50%; background-size: cover; /* PS: Use separately here cause of Safari bug */

fixed (background-attachment) is optional.

The above is simply a shorthand for:

 background-image : url(image.jpg); background-attachment : fixed; background-position : 50% 50%; /* or: center center */ background-size : cover; /* CSS3 */

You can use in all modern browsers , but Safari :

 background: url(image.jpg) fixed 50% / cover;

where / used in background reduction to separate and distinguish position from size (because the position accepts both single and multiple (X, Y) values), but Safari has an error with this / abbreviated use as described above.

+11
source

Use the background-size attribute and set the background repeat to no-repeat .

Like this:

 body { background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

See jsFiddle

+2
source

Set this for background image

 background-size: cover
+1
source 
 background-size: 100% 100%; background-position: top left; background-repeat: no-repeat;

gotta do the trick. Please note: you can combine the position and repeat in the original background attribute

And apply

 html, body { min-height: 100%; min-width: 100%; }
0
source

You can always use the absolute position of the div to 100% of the width and height with the z-index so that it can be the background, after which you can insert the image with the same css for it. thanks

0
source

Source: https://habr.com/ru/post/1500001/

More articles:


All Articles