Menu icon Foundation
Full screen background?

This is rather a general question for any web developers.
How do i ensure that my background of the landing page stays full screen on medium and up devices? I also want my components to be proportionate to the screen size and position themselves in the center of the screen etc.

One of the ways i know is using extensive media queries and writing one for each screen size, but is there any other way, with percentages or ems that'd get me a similar result?

full screenResponsivebackground

This is rather a general question for any web developers.
How do i ensure that my background of the landing page stays full screen on medium and up devices? I also want my components to be proportionate to the screen size and position themselves in the center of the screen etc.

One of the ways i know is using extensive media queries and writing one for each screen size, but is there any other way, with percentages or ems that'd get me a similar result?

Avery L over 5 years ago

I think the best way is to do it via media queries. If you do it in the html the browser will download all of the images (not good for mobile users), whereas with media queries most of the browsers will download only the one they need.

so if you use sass for your medium and up devices it could be:
@media #{$medium-up} {
//background css goes here
}

If you want to learn how to create a cover background check out this site and do some research, it's really easy to do: http://css-tricks.com/perfect-full-page-background-image/

vaynenick about 5 years ago

body
{
background: url(model.png) no-repeat;
background-size: 100%;
}

Source : http://www.corelangs.com/css/text/image.html

Vayne

hamidradami 8 days ago

This code should work for you

HTML:
<img src="example.jpg" class="fullimg">

CSS:

.fullimg {
    background:
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}