htmlcssbackgroundtransparencybootstrap-grid
Background surrounding an element but not behind it
So I have a div, that contains an img, the div fills the entire screen. I need the img (E on the attachment) to take as much width or height keeping aspect ratio. I need to place a background-color surrounding my img but not behind the img (since it has transparency and I need to see whats behind).
So far I got my img taking as much width and height as possible, but can't figure out how to put a background only around the img and not behind.
My guess would be that A, B, C, D, F, G, H, I are div with a background-color, while E is the img or a div containing the img.
I'm using Bootstrap 3.3.7 and I want to keep that as adaptive as possible.
Please help!
EDIT: Full Code looks like this EDIT 2: Simplified my code, changed the approach to a grid one and adding a jsfiddle. Unfortunately, still have gaps to fill on B and C from image attachment and E isn't taking all the space it should take.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.grd-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
/*align-content: stretch;*/
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.grd-item-1,
.grd-item-2,
.grd-item-3,
.grd-item-4,
.grd-item-6,
.grd-item-7,
.grd-item-8,
.grd-item-9 {
background-color: #000000;
}
.grd-item-1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-4 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.grd-item-5 {
/* main */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
}
.grd-item-6 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.grd-item-7 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-item-8 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-item-9 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-bg {
z-index: -1;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
</style>
</head>
<body>
<div class="grd-container">
<div class="grd-bg">
<video playsinline autoplay muted loop poster="http://via.placeholder.com/1600x900" id="bgvid"
style="
position: absolute;
top: 50%;
left: 50%;
margin-top: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(http://via.placeholder.com/1600x900) no-repeat;
background-size: cover;
">
<source src="http://f.jblab.info/so_49420556/videobg.mp4" type="video/mp4">
</video>
</div>
<div class="grd-item-1">1</div>
<div class="grd-item-2">2</div>
<div class="grd-item-3">3</div>
<div class="grd-item-4">4</div>
<img class="grd-item-5" src="http://f.jblab.info/so_49420556/mask.svg">
<div class="grd-item-6">6</div>
<div class="grd-item-7">7</div>
<div class="grd-item-8">8</div>
<div class="grd-item-9">9</div>
</div>
</body>
</html>
Solution
I did not get it to work with pure CSS so I'm using a hybrid CSS/js solution.
Should anyone finds a pure CSS solution, please share.
Here's what I've got so far.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.cover-img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
}
#bgvid {
position: absolute;
top: 50%;
left: 50%;
margin-top: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('https://jsfiddle.net/jbonnier/Lh4133ah/22/') no-repeat;
background-size: cover;
}
.grd-container {
display: grid;
grid-template-columns: auto max-content auto;
grid-template-rows: auto max-content auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.grd-item-1,
.grd-item-2,
.grd-item-3,
.grd-item-4,
.grd-item-6,
.grd-item-7,
.grd-item-8,
.grd-item-9 {
background-color: #000000;
}
.grd-item-1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.grd-item-4 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.grd-item-5 {
/* main */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.grd-item-6 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.grd-item-7 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-item-8 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-item-9 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.grd-bg {
z-index: -1;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
</style>
</head>
<title>Title</title>
<body>
<div class="grd-container">
<div class="grd-bg">
<video playsinline autoplay muted loop poster="http://via.placeholder.com/1600x900" id="bgvid">
<source src="http://f.jblab.info/so_49420556/videobg.mp4" type="video/mp4">
</video>
</div>
<div class="grd-item-1"></div>
<div class="grd-item-2"></div>
<div class="grd-item-3"></div>
<div class="grd-item-4"></div>
<div class="grd-item-5">
<img src="http://f.jblab.info/so_49420556/mask.svg" class="cover-img">
</div>
<div class="grd-item-6"></div>
<div class="grd-item-7"></div>
<div class="grd-item-8"></div>
<div class="grd-item-9"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(window).ready(function() { resizeCoverImages(); })
$(window).resize(function() { resizeCoverImages(); });
function resizeCoverImages() {
$('.cover-img').each(function() {
var dimensions = calculateAspectRatioFit($(this).width(), $(this).height(), $(window).width(), $(window).height());
$(this).width(dimensions.width);
$(this).height(dimensions.height);
});
}
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
</script>
</body>
</html>
- Can I use multiple labels for a form element?
- <fieldset> has no border
- How do I place two divs side by side?
- Align <hr> to the left in an HTML5-compliant way
- CSS before and after content with brackets not working
- CSS Background Image Not Displaying
- Webpage that shows a button on user entering a correct text string in an text entry field
- javascript: save <svg> element to file on disk
- Show a message if a text is copied successfully(alternative to alert)
- Maximum call stack size exceeded error
- Unexpected First Line Indentation
- how to extract the texts after the first h1 Tag?
- How do you click on an element with text in Puppeteer?
- Different page orientation for printing HTML
- Mustache.js splits HTML attibutes between whitespaces
- Two submit buttons in one form
- filling out an html img tags 'src' form based on information derived from API javascript code
- HTML 'select' element keyboard navigation
- How can I tell Google Translate to not translate a section of a website?
- How do make sure background-color covers the entire width of scrollable element, not just the visible part?
- Kendo Splitter not working well with angular on collapsing dynamic panels
- How to apply bootstrap style to inline <select> element
- How to provide a HostAttributeToken in Angular tests?
- Differentiate by section class in Selenium
- can <main> element be nested inside a div or must be a direct descendant of body?
- How to show a label only to Screen Readers - Web Accessiblity
- When do custom elements invoke lifecycle hook formStateRestoreCallback with reason argument equal to "autocomplete"?
- HTML `dialog` element: scroll content independently of background
- div display status not changed by javascript
- How to listen iframe keydown event with ReactJS