position image absolute to a full screen

Question

I want to position a background image on the background of my page.

I have a page that is finished. Now I need to place an image on the background of the page that is positioned on the center and will span the entire width of the browser.

Yeah I know confusing. I didn't understand either when I read it. So I added a Fiddle here

I want to add a background image to the wrapper and center it on the two div's while it's possible to be bigger then the screen.

<div class="wrapper">
    <div class="container">
        <div class="left">
           Left content
        </div><div class="right">
             right content
        </div>
    </div>
</div>

Hope now it makes sense.

http://stackoverflow.com/questions/2643305/centering-a-background-image-using-css — mtrueblood, Dec 16 '16 at 13:41
Why not simply add it to the `` of your page: `background: url( path_to_image ) no-repeat center; background-size: cover;` — meavo, Dec 16 '16 at 13:45

score 1 · Answer 1 · answered Dec 16 '16 at 13:48

You need to remove the background from the .container to show the background image on the .wrapper. And use three background position to adjust it:

background-image: url() - To include the image.
background-size: cover - To cover whole background size.
background-image: center - To make it at the center of the div.

Have a look at the below snippet:

.wrapper{
  margin: 0 auto 0 auto;
  max-width: 100%;
  text-align: left;
  background-image: url(http://placehold.it/200x200);
  background-size: cover;
  background-position: center;
}

.container{
  position: relative;
  max-width: 1280px;
  height: 260px;
  /* background: #ffffff; */
  margin: 0 auto;
}

.left{
  position:relative;
  display:inline-block;
  width:50%;
  border:1px solid #000;
}
  
.right{
  position:relative;
  display:inline-block;
  width:49%;
  border:1px solid #000;
}

<div class="wrapper">
    <div class="container">
        <div class="left">Left Content</div><div class="right">Right Content</div>
    </div>
</div>

Hope this helps!

score 0 · Answer 2 · answered Dec 16 '16 at 13:49

0

You can find a solution here - you need to get rid of white background on .container as it will cover the background of the .wrapper . Then, you can set background-size: cover; for .wrapper so it will cover whole area of that div. I have used some random background.

.wrapper{
  margin: 0 auto 0 auto;
  max-width: 100%;
  text-align: left;
  background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
  background-size: cover;
}

answered Dec 16 '16 at 13:49

David

1

Close. Thnx. The thing is that I have an image that is a triangle with it's top in the right bottom corner. So there is a side that goes from the left bottom to the right top. I want to position this in the right bottom of the screen but need to be able to move it over the x-axis – Interactive Dec 16 '16 at 13:58
I have updated the fiddle:https://jsfiddle.net/0ao6r0en/6/. This seems to work however the background isn't responsive. Is there a way to do this? – Interactive Dec 16 '16 at 14:12

score 0 · Answer 3 · answered Dec 16 '16 at 13:52

0

I wasn't quite sure what you meant, but I updated your fiddle. https://jsfiddle.net/0ao6r0en/3/

I think you meant that you want white behind the boxes, center that white box, and have an image on the wrapper?

Thats what I did for you so you can see, check it out!

Check out the fiddle

answered Dec 16 '16 at 13:52

Jacob Price

71
1
5

Close. Thnx. I have an image that is a triangle with it's top in the right bottom corner. So there is a side that goes from the left bottom to the right top. I want to position this in the right bottom of the screen but need to be able to move it over the x-axis – Interactive Dec 16 '16 at 13:57

position image absolute to a full screen

3 Answers3