I have a container like so: enter image description here
I have an image that is 100% width and height of the container, but I want the contents to only be visible in the blue boxes and not visible in the red boxes. How do I do so?
One way of doing this with a fixed image is to have each of the boxes have a pseudo before element that is the full size of the container and with that image as background.
In this snippet the box is clipped to its own size so that background gets clipped too and you see just the part that is 'below' the box.
* {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
background-color: red;
}
.container>div::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/1015/1024/768);
background-size: cover;
z-index: -1;
}
.container>div {
position: absolute;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.box1 {
top: 10%;
height: 70%;
width: 20%;
left: 10%;
}
.box2 {
top: 20%;
height: 50%;
width: 20%;
left: 70%;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Related
Map Page
Hi I'm making a map on my website and it needs to have icons on it that can be hovered which means they can't be apart of the actual map image itself.
I'm wondering how I would place the icons on the map and keep them in the same position on the map at different view widths/heights.
This is the CSS for my map background:
.background {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100vw;
height: 100vh;
background: url("../assets/map.png") no-repeat center center fixed;
-webkit-background-size: 100vw 100vh;
-moz-background-size: 100vw 100vh;
-o-background-size: 100vw 100vh;
background-size: 100vw 100vh;
}
The map will change size based on the resolution of the screen which makes it tricky for me to keep the icons in the same place through screen changes. Currently I tried using position absolute and putting it in the right place but as you change the screen so does the placement of the icon.
Am I doing it wrong or is there another solution to this? Thanks.
if you wanna position icons on a background then you have to give that background container a position relative and then give the elements inside background container a position absolute
body,
html {
margin: 0;
padding: 0;
}
.background {
position: relative;
width: 100%;
min-height: 100vh;
background-image: url('https://i.stack.imgur.com/KQxKh.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.icon1 {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon2 {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 50px;
height: 50px;
background-color: #4AC144;
}
.icon4 {
position: absolute;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon5 {
position: absolute;
bottom: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
<div class="background">
<span class="icon1"></span>
<span class="icon2"></span>
<span class="icon3"></span>
<span class="icon4"></span>
<span class="icon5"></span>
</div>
I'm trying to add a fade effect to a banner but I can't properly calc the size of image to adjust the fade properly.
For example. if I have an image 1000x400 I need to adjust the calc to be calc(100% - 1010px); but if the image is 1200x400 I can't change dynamically the size to calc(100% - 1210px);
.container {
width: 100%;
min-height: 25rem;
background-color: coral;
display: block;
overflow: hidden;
position: relative;
}
.background-image {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background-image: url("https://placeimg.com/1000/400/any");
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
}
.background-image:after {
content: "";
width: calc(100% - 1000px);
height: 120%;
position: absolute;
top: -30px;
left: 0;
overflow: hidden;
box-shadow: 50px 0 100px 100px coral;
}
<div class="container">
<div class="background-image"></div>
</div>
You can try it on codepen: https://codepen.io/Gabrielr472/pen/jONKNdO
If you can use css variables you can try this solution:
<div class="container">
<div class="background-image" style="--width: 1220px"></div>
</div>
and in css
width: calc(100% - var(--width));
and if you need to modify it in js:
elem.style.setProperty('--width', '1220px');
https://codepen.io/Xesenix/pen/qBWKoPY
I'm trying to position the logo to the center of the header div with half of the logo overflowing to the bottom div. I have the following but I can't figure out how to dynamically set it to be centered. Because relying on top and left values seems like it's going to be inconsistent.
.header {
position: relative;
height: 200px;
background-color: #000;
&:after {
z-index: 2;
content: ' ';
position: absolute;
left: 27%;
top: 60%;
width: 200px;
height: 200px;
background-image: url('images/logo.png');
}
}
You can use left: 50% with negative margin-left (half of logo width).
.header {
background-color: #000;
position: relative;
height: 200px;
}
.header:after {
margin-left: -100px;
position: absolute;
background: #f00;
bottom: -100px;
height: 200px;
width: 200px;
content: ' ';
z-index: 2;
left: 50%;
}
<div class="header"></div>
May I suggest flexbox?
Centering logic will be handled for you, then you just need to make sure the background image is positioned correctly.
.header {
background-color: #000;
height: 200px;
position: relative;
&:after {
content: '';
height: 100%;
display: flex;
background: url('http://i.imgur.com/9My4X1v.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
}
https://jsfiddle.net/JackHasaKeyboard/9azLwx22/10/
I'm trying to overlay this logo so it sits at the bottom of the page, and also so it is offset by its full width to the left (so that the right edge of the logo sits against the center line).
If I use position:absolute on #logo I have access to the top and left properties, which is good, but now centering won't work...
Here's the fiddle.
Also: making it a fixed distance from the left edge of the page won't work because the page is responsive. The right edge of the logo always has to sit perfectly on the center line.
In case the fiddle isn't working here's the code:
HTML:
<div id ="layer1">
<p>Hello</p>
</div>
<div id="layer2">
<div id="wrapper">
<img id="logo" src="http://i.stack.imgur.com/icxpG.png"/>
</div>
</div>
CSS:
body {
background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#layer1 {
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
#layer2 {
position: absolute;
z-index: 5000;
height: 100%;
width: 100%;
}
#wrapper {
position: relative;
background-color: rgba(255, 255, 255, 0.3);
height: 100%;
}
#logo {
background-color: rgba(255, 0, 0, 0.3);
bottom: 0;
display: block;
margin-left: auto;
margin-right: auto
}
You could add position: absolute; and transform to center your #logo like this:
JSFiddle - DEMO
#logo {
background-color: rgba(255, 0, 0, 0.3);
display:block;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
To get the image positioned offset perfectly at all widths, we need to get rid of the gradient and apply the second background to a pseudo element of the body.
In these 2 examples, body provides the orange background and body:before provides the dark background.
Example 1 - logo is a background image
calc(50% - 167px) offsets the logo.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: #f15922 url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat;
}
body:before {
width: 50%;
height: 100%;
background: #1a1a1a;
content: '';
display: block;
position: absolute;
right: 0;
}
Example 2 - logo is <img>
right: 50% and bottom: 0 keep it at the bottom and offset by the natural width of the image.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: #f15922;
}
body:before {
width: 50%;
height: 100%;
background: #1a1a1a;
content: '';
display: block;
position: absolute;
right: 0;
}
#logo {
position: absolute;
bottom: 0;
right: 50%;
}
<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />
Old Archived Examples (with gradient)
Limitation: There is a gap at certain viewport widths that is caused by the gradients 50% calculation. I'm not certain that this can be avoided.
Archived 1 - Keep it all in a background image / gradient
calc(50% - 167px) offsets the image from the center
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat, linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
Archived 2 - Using <img>
right: 50% and bottom: 0 keep it at the bottom and offset by the natural width of the image.
body {
background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#logo {
background-color: rgba(255, 0, 0, 0.3);
bottom: 0;
right: 50%;
position: absolute;
}
<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />
I am creating a "light box" sort of effect. Without using JavaScript, how can I make the light box resize according to the viewport size so that it always stays in the center of the viewport and occupy 80% of the width and height?
<div class="fullscreen-dim">
<div class="dialog">
<img src="http://placehold.it/300x200">
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0; right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%; // how to respect aspect ratio??
}
.dialog { // dialog should auto-size just big enough to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
a {
position: absolute;
bottom: 5px; right: 5px;
}
In this method http://jsfiddle.net/3Lohtes9/ , the dialog resizes but the image does not respect aspect ratio.
This problem can also be interpreted as one of the "grandparent div" questions on SO. How can I set the image size with respect to full-screendim and let dialog to auto-size to fit?
EDIT: Instead of enclosing the img in the dialog div, I can achieve a similar visual effect of having the border around the image and still have the image resize accordingly when viewport size changes. However, I have no way to place the close button now. Any advice?
Change .dialog height from 80% to auto. See fiddle
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.dialog {
padding: 20px;
// to create a"border" around the image;
position: fixed;
background-color: red;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: auto;
}
a {
position: absolute;
bottom: 5px;
right: 5px;
}
edit:
try adding this if you want more control (like a min-height) or simply remove all height and width from .dialog:
width: auto;
max-width:80%;
height:auto;
max-height:80%;
min-height: 100px;
new fiddle
Using the information from this question, you can set the image to be aligned horizontally within the lightbox. Then by removing the height of the image, it will scale correctly with the aspect ratio.
The key CSS changes are here
img {
display: inline-block;
width: 100%;
vertical-align: middle;
}
/* This is a new element, see the question linked above. */
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
And the HTML
<div class="fullscreen-dim">
<div class="dialog">
<span class="helper"></span>
<img src="http://placehold.it/300x200"/>
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
See fiddle: http://jsfiddle.net/3Lohtes9/7/
Instead of all of this
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
try
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 10%; top: 10%;
right: 10%; bottom: 10%
}