the background image of my web doesn't fill all the height of the window when there isn't enough content, here is a example:
Without content:
With content:
here is the app.component.html:
<body>
<!-- Background -->
<div class="bg">
<!-- nav -->
<app-navbar></app-navbar>
<!-- Logo -->
<div style="text-align:center">
<img width="200" alt="BookCloud Logo" [routerLink]="['/books']" src="../assets/logo3.png">
</div>
<!-- App -->
<div class="container">
<app-alert></app-alert>
<router-outlet></router-outlet>
</div>
</div>
</body>
and here is the app.component.css:
.container {
width:100%;
height:100%;
}
img {
outline: none;
}
html, body{
height: 100%;
}
.bg{
position: relative;
display:block;
background: url('../assets/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
What im doing wrong? Thanks for reading.
You css should be
.bg{
position: relative;
display:block;
background: url('../assets/bg.jpg') no-repeat center center fixed;
background-size: 100% 100%;
}
If that doesn't work, change .bg to body.
Related
How do I add all the texts and buttons to display on the background img not below it?
Using Bootstrap 5.
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="img/Landing.jpg" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
CUSTOM CSS
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
background-image: url('img/Landing.jpg');
min-height : 100%;
min-width : 100%;
background-size: 100% 100%;
background-repeat:no-repeat;
overflow-y: hidden;
overflow-x: hidden;
}
/* BG IMAGE*/
.landingPageBack {
background-image: url('https://images.unsplash.com/photo-1637593755675-c38c18661a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80');
background-size: cover;
background-repeat: no-repeat;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="landingPageBack">
<div class="vh-100 vw-100 d-flex justify-content-center align-items-center">
<div class="text-center text-white">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</section>
<!-- begin snippet: js hide: false console: true babel: false -->
Please check the code, Hope it will help you.
Here are some links you should go through:
https://getbootstrap.com/docs/5.1/utilities/flex/
https://getbootstrap.com/docs/5.1/utilities/sizing/#relative-to-the-viewport
Make the wrapped container div position: relative. Then you can place the image inside and a text Block element. The text-blockelöement must be position: absolute. With the css attribute top and left, bottom, right you can position the text on the image.
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: red;
font-size: 5rem;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://via.placeholder.com/500/green" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
And for your example, you would only have to adjust your two classes a bit.
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
position: relative;
}
.text-center {
position: absolute;
top: 50%;
left: 40%
}
.landingPageBack {
background-image: url('https://via.placeholder.com/500/green');
background-repeat: no-repeat;
background-size: 100%;
}
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="https://via.placeholder.com/500/green" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
I'm attempting to have several overlapping divs that are then selectively displayed through scrolling. This can already be accomplished with images using background-attachment: fixed, but I'm looking for a solution that can work with any child element.
A working example of the desired effect with images:
.main {
position: relative;
height: 100vh;
overflow-y: scroll;
}
.scroll-block {
height: 100vh;
width: 100vw;
overflow: hidden;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
<html class="overflow-hidden">
<head>
<link rel="stylesheet" href="/public/tailwind.css">
</head>
<body class="main">
<div class="scroll-block" style="background-image: url(http://placekitten.com/500/500)">
</div>
<div class="scroll-block" style="background-image: url(http://placekitten.com/400/400)">
</div>
<div class="scroll-block" style="background-image: url(http://placekitten.com/300/300)">
</div>
</body>
</html>
I tried simply putting a fixed/absolute div inside the scrollable blocks and setting overflow: hidden, but the overflow property has no effect on fixed/absolute divs. Is there any way to achieve this with CSS?
clip-path can help you here:
body {
position: relative;
height: 100vh;
margin: 0;
overflow-y: scroll;
}
.scroll-block {
height: 100vh;
clip-path: inset(0);
}
.scroll-block > * {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
padding:20px;
}
<body class="main">
<div class="scroll-block">
<div>
<img src="http://placekitten.com/500/300">
<h2>title1</h2>
</div>
</div>
<div class="scroll-block">
<div>
<img src="http://placekitten.com/400/400">
<h2>title 2</h2>
</div>
</div>
<div class="scroll-block">
<div>
<img src="http://placekitten.com/300/300">
<h2>title 2</h2>
</div>
</div>
</body>
I have a video gallery of thumbnails in bootstrap 3. Each thumbnail has a text overlay that appears on mouse hover. This all works fine but I am now trying to add a play icon to the overlays. The problem is that whilst the original text thumbnails are responsive the play icon is not. What have I got wrong?
Here is a fiddle
<div class="container">
<div class="row">
<div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>
<div class="thumbnail">
<a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">
<div class="caption">
<h4 class="">Richard Feynman</h4>
<p class=""> Watch Him</p>
</div>
<!-- /.caption-->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive"></a>
</div>
<!-- /.thumb-->
</div>
<!-- /.col -->
</div>
<!--end row-->
</div>
<!-- /.container -->
CSS
.thumbnail {
position: relative;
overflow: hidden;
background: transparent;
border: none;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: left;
color: #fff !important;
z-index: 2;
/*This is the play icon I ant to be responsive */
background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center;
}
jQuery
$("[rel='tooltip']").tooltip();
$(document).ready(function() {
$('.thumbnail').hover(
function() {
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function() {
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
You are setting the background image, buy you haven't specified a size so it will default to the full size.
You can set the background-size relative to the container size by using percentages, e.g. the following would make the image half the size of the container:
background-size: 50%;
In your case, if you want the image to fill the container, you can set the background to 100% e.g.
background: transparent url([your url]/play-video.jpg) no-repeat center;
background-size: 100%;
Working snippet:
/* Latest compiled and minified JavaScript included as External Resource */
$("[rel='tooltip']").tooltip();
$(document).ready(function() {
$('.thumbnail').hover(
function() {
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function() {
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
.thumbnail {
position: relative;
overflow: hidden;
background: transparent;
border: none;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: left;
color: #fff !important;
z-index: 2;
background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center;
background-size: 100%;
}
/* Added for tesing because your img-responsive class isn't working */
img { width: 100%; height: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>
<div class="thumbnail">
<a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">
<div class="caption">
<h4 class="">Richard Feynman</h4>
<p class="">
Watch Him</p>
</div>
<!-- /.caption-->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive">
</a>
</div>
<!-- /.thumb-->
</div>
<!-- /.col -->
</div>
<!--end row-->
</div>
<!-- /.container -->
Note:
This make the background image 100% of the container, even if the container is larger than the original image size. In your case, you've put the video in Bootstrap cols so it shouldn't be an issue, however if it did become a problem, you would just use media queries to change the percentage value to suit.
Example: Make the background image responsive until the screen size reaches 768px, then limit it to a fixed size:
.caption {
background: transparent url([your url]/play-video.jpg) no-repeat center;
background-size: 100%;
}
#media (min-width: 768px){
.caption {
background-size: 400px 300px;
}
}
here is my html:
<div id="banner" style="background-image: url("img/banner.jpg")">
<img src="img/logo.png" alt="logo" />
</div>
and this is my css:
#banner {
width: auto;
height: 100vw;
background: url("/img/banner.jpg");
I want the banner.jpg to be the background of that div with full viewport fill... what to do?
Add the following CSS code:
#banner{
width: %100;
}
This is how I would achieve the effect https://jsfiddle.net/d5Lptwut/10/
<div id="banner">
<img src="img/logo.png" alt="logo" />
</div>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#banner {
background: url('/img/banner.jpg') no-repeat center center;
height: 100%;
width: 100%;
background-size: cover;
}
I'm really struggling with my footer. I've followed the instructions at http://www.cssstickyfooter.com/ to make my footer stick to the bottom of the page. It works fine until I add divs into the footer div - the purple background and image disappears. I would do it as a single div but I can't work out how to do the zigzag edge without creating a separate box.
Any help would be greatly appreciated! I've been trying for days to get this to work.
Here is my HTML:
<body>
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<img src="images/logo.png" width="435px" height="112px" alt="Lauren Womack Logo" />
<div id="menu">
<img src="images/menu/home.png" width="142" height="160" alt="Home" />
<img src="images/menu/about.png" width="131" height="157" alt="About" />
<img src="images/menu/contact.png" width="128" height="160" alt="Contact" />
</div>
</div>
<!-- End Header -->
<!-- Begin Content -->
<div id="content">
<div id="rightholder">
<div class="outerleft">
<div class="inner"><h2>Animation and Interactive</h2>
</div>
</div>
<div class="outerright">
<div class="inner">
<h2>Web Design</h2>
</div>
</div>
<div class="outerleft">
<div class="inner">
<h2>Print Design</h2>
</div></div>
<div class="outerright">
<div class="inner">
<h2>Illustration</h2>
</div>
</div></div> <!-- End Content -->
</div>
</div><!-- Begin Footer -->
<div id="footer">
<div class="footeredge"> </div>
<div class="footerinner"> <p>© Lauren Womack 2012</p>
</div> </div> </div>
<!-- End Footer --></body></html>
And here's my css:
body {font-size: 13px; background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;}
html {height: 100%;}
#wrapper{ min-height:100%; min-width:992px; margin-left:0px; margin-right:0px;}
#header {height: 170px; padding-top:36px; border: none;}
#menu {float:right;}
#content { position: relative; min-width: 1141px; border:none;background: none; overflow:auto; padding-right:32px; padding-left:32px; padding-bottom: 86px;}
#rightholder { float: right; clear: left;min-width: 639px;width: 60%;padding-top: 90px;}
.outerright {background-image:url(images/threadborder.jpg);min-width: 257px;width: 45%; height: 98px; margin-top: 22px; margin-bottom: 22px; margin-left: 20px;float: right;clear: right;}
.outerleft {background-image:url(images/threadborder.jpg);
min-width: 257px; width: 45%; height: 98px; margin-top: 22px;margin-bottom: 22px;margin-right: 20px; float: left;clear: left;}
.inner {padding: 5px; height: 87px;}
#footer {position: relative; margin-top:-86px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; height:86px; clear:both; padding-right: 32px; margin-left:0px; margin-right:0px; border: none;
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
.footeredge {
background-color: none;
background-image:url(images/footer/zigzag.png);
background-repeat:repeat-x;
height: 20px;
}
.footerinner {
background-color:#663366;
height: 66px;
}
How I want it to look: http://tinypic.com/r/242swuc/6 The purple box at the bottom and the zigzag isn't showing though, just the text.
There's no closing curly brace for #footer, which in turn break's your style declarations after this point.