Home screen - structure

Question

Home screen - structure

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I want to set as the home page of my site an image that occupies the entire background, as follows:

<style type=text/css>
body {
    background-image: url("imagem.jpg");
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;}
}
</style>

But I want it fixed in the background (instead of the white background, which appears normally) and above this image I want to put the rest, which will compose the screen. Footer, Top, Login area, Registration ... All positioned on this image, which will be just the background. Can I do this with div? How do I proceed? If anyone can guide me or help by example, thank you.

html css

asked by anonymous 12.08.2015 / 23:06

2 answers

Problem in Ruby on Rails 3.2 - It shows in Git's HTML commands Program does not perform expected flow

score 1 · Answer 1

1

You can use the property background-size :

body {
  background: url(http://i.stack.imgur.com/HWdW6.jpg);
  background-size: cover
}

13.08.2015 / 00:23

score 1 · Answer 2

As @ re22 has already said, in order for the image to occupy the full size of the screen / screen completely, you can use the background-size: cover; property and the background image to be fixed as we scroll of a page / website, use - background-attachment: fixed; :

background-image: url(imagem.jpg);  /* URL da imagem pretendida */
background-repeat: no-repeat;       /* A imagem não é para ser repetida ao longo da página */
background-position-x: center;      /* alinhamento horizontal : left|center|right|px */
background-position-y: center;      /* alinhamento vertical: top|center|bottom|px */
background-attachment: fixed;       /* A imagem é para ficar fixa quando utilizada a Scrollbar */
-webkit-background-size: cover;     /* Navegadores Chrome, Safari */
-moz-background-size: cover;        /* Firefox */
-o-background-size: cover;          /* Opera */
background-size: cover;             /* Todos os outros. Imagem como 'capa' ocupando 100% altura/largura sem perder a sua proporção */

Here is an example below with the simplified code using only - background:; to add all of these styles mentioned above at once:

body { 
    background: url(http://i.stack.imgur.com/SjGmV.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}