Photoshop Question posted in
The official user guide can be found here.

Cover the body using a background image with a fixed border – Photoshop

I got a little project but it brings me so much trouble…

How to make the image and the white border cover the viewport, where the border is equal all the time?

Here is a screendump of the layout I want, created with Photoshop.

enter image description here

The CSS I tried so far.

body {
    background-repeat: no-repeat;
    background-position: center center fixed;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(../img/bg_border.jpg);
}

If you have a clue, any help would be appreciated! Thanks!

Tags:

2

Answers


  1. 0

    Hello you need to wrap your content into .wrapperand the background image on cover inside it.

    with your height : http://codepen.io/SzymonDziewonski/pen/RWZzGq

    and with fluid fullscreen height : http://codepen.io/SzymonDziewonski/pen/jbLjVb

    There is a lot of ways of doing that – that’s just two of them

    EDIT my mistake – community was right

    So as redemption I’m giving code here in snippet.
    We learn every day as do I.

    First solution: with your height of wrapper container

    body{
  padding: 40px;
}
.wrapper{
  background-color: red;
  width: 100%;
  height: 400px;
  position: relative;
  background-image: url("http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
}
    <div class="wrapper"></div>

    Second solution: fluid height of wrapper container

    *{
  padding: 0;
  margin: 0;
}
body{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper{
  background-color: red;
  position: absolute;
  top: 40px;
  left:40px;
  bottom: 40px;
  right: 40px;
  background-image: url("http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
}
    <div class="wrapper"></div>
    Login or Signup to reply.
  2. 0

    Something like this?

    html, body {
  margin: 0; padding: 0; height: 100%;
}
.wrapper {
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center center fixed;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(http://lorempixel.com/output/nature-q-c-1000-600-1.jpg);
    border: 50px solid white;
    height: 100%;
}
    <div class="wrapper"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search