CODEWITHSUNDEEP
htmlcss
mk_89
mk_89

Reputation: 2742

Creating a mask with a centered div image with a border

I'm trying to create a simlpe pop-up mask that is meant to display gallery images and I need to center the inner div both vertically and horizontally, I also have another issue where I need the div container to have a border that fits perfectly around the image, I was thinking for this that I could probably put a span tag inside the central div.

I would prefer not to use Javascript to do this, but if it comes to that I will

Anyway here is what I have so far:

http://jsfiddle.net/swmhtgx5/7/

HTML:

<body>
    <div class='screen_mask'>
        <div class='image_container'></div>
    </div>
</body>

CSS:

 body{background:lightgrey; }


.screen_mask{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 5000;
    background-color: #000000;
    visibility: visible; text-align:center;
    background-color: rgba(43, 44, 44, 0.7);
    background: rgba(43, 44, 44, 0.7);
    color: rgba(43, 44, 44, 0.7);
}

.screen_mask .image_container{
    width:700px; margin:auto;  height:300px; border:1px solid white;       background-repeat:no-repeat; background-position:center; background-image:url('http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg');
}

Upvotes: 1

Views: 1365

Answers (2)

dippas
dippas

Reputation: 60563

If you want a fluid popup div, this would be a solution:

body {
    background:lightgrey;
}
.screen_mask {
    position: relative;
    width: 50%;
    height: 50%;
    position: absolute;/*(or relative)*/
    top: 25%;
    left: 25%;
    z-index: 5000;
    background-color: #000000;
    visibility: visible;
    text-align:center;
    background-color: rgba(43, 44, 44, 0.7);
    background: rgba(43, 44, 44, 0.7);
    color: rgba(43, 44, 44, 0.7);
}
.screen_mask .image_container {
    display: block;
    position: relative;
    width: 100%;
    height:100%;
    border:1px solid white;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url('http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg');
    background-size:cover;
}
<body>
    <div class='screen_mask'>
        <div class='image_container'></div>
    </div>
</body>

Upvotes: 1

Giannis Grivas
Giannis Grivas

Reputation: 3412

I think you want something like that: http://jsfiddle.net/csdtesting/4ajzmwq7/

body {
  background: lightgrey;
  background-color: #000000;
  visibility: visible;
  text-align: center;
  background-color: rgba(43, 44, 44, 0.7);
  background: rgba(43, 44, 44, 0.7);
  color: rgba(43, 44, 44, 0.7);
}
.image_container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 60%;
  padding: 20px;
  background: lightgrey;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  border: 1px solid white;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg')
}
<body>
  <div class='image_container'></div>
</body>

Upvotes: 2

Related Questions