Site home screen - structure

Asked

Viewed 756 times

0

I want to define 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 the same fixed on the background (in place of the white background, which appears normally) and on top of this image I want to put the rest, which will compose the screen. Footer, Top, login area, registration... Everything 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 me with example, I thank you.

inserir a descrição da imagem aqui

html css

  • This code you posted gave some trouble?

  • No, it just uploaded the image as the background occupying the entire screen. Now how do I keep this image (make it clearer) and overlay content on that background?

  • 1

    So, if the image was applied to the body, anything inside it (which would already be the full page) will already overlap it, post a screenshot of your intention to understand easier.

  • If what you’re trying to do is keep the image fixed relative to the scrolling of the page, you can use the property background-attachment:fixed;

2 answers

1

You can use the property background-size:

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

1

As @re22 said, for the image to take the full screen/screen size, you can use the property background-size: cover; and for the background image to be fixed as we do scroll of a page/website, uses - 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’s an example below with the simplified code using only - background:; to add all 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;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.