I am currently trying to code a frontpage according this design, using bootstrap 5. I've managed to set the background to cover the entire page. However, I can't seem to get the white transparent overlay-block right, and the placing of the content inside. This should also be responsive according to this design.
Whats the best solution for doing this?
Currently I've got:
Startpage html
<div class="startpage">
<div class="hero">
<div class="container">
<div class="row">
<div class="col-md-7 offset-md-1">
<h1 class="pb-2 pb-md-4">Heading Title</h1>
<button class="btn btn-primary mt-3" type="button">Button Title</button>
</div>
</div>
</div>
</div>
</div>
Startpage css
.startpage {
height: 100vh;
background: url(URL HERE);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero {
background-image: linear-gradient(rgba(250, 250, 250, 0.95), rgba(255, 255, 255, 0.8));
min-height: 70%;
padding-top: 200px;
}
On the navbar I've got:
header {
position: absolute;
width: 100%;
}
Related
I'm just trying to get an image to resize to stay within it's div, but it continues to spill over onto the div below when I reshape my browser size or view in my laptop.
I haven't set any fixed dimensions. I am using bootstrap v5 and tried 2 image classes in the code.
I realise my code may contain some unrequired items and doubling of commands etc., but they are all things I tried with no avail. An example screenshot of my issue.
The only thing I've not yet done (and is my last option if I can't get the image to scale within the divs) will be to create more breakpoints and corresponding CSS for them. However the image doesn't spill out of it's divs on mobile devices and seems to in part be responsive - so I'm not sure if this is necessary. And it seems like there should be a simpler solution to what I'm trying? Perhaps not.
Many thanks.
#cover2 {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("https://www.kelvindalewhisky.com/public/img/2.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding-top: 50px;
display: flex;
}
.wrapper {
padding-top: 100px;
height: 100%;
width: auto;
display: flex;
margin: auto;
}
.wrapper img {
height: 80%;
width: auto;
}
img {
max-width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section id="cover2">
<div class="container">
<div class="row">
<div class="wrapper">
<div class="col-md-12">
<img src="https://www.kelvindalewhisky.com/public/img/kelvindalegold.png" alt="..." class="img-fluid" class="img-responsive">
<br><br>
<span style="font-size: 60px; color: #ec894b;"><i class="fas fa-chevron-down icn_blue wow shake" data-wow-duration="1500ms"></i></span>
</div>
<!-- container ends-->
</div>
</div>
<!-- row ends-->
</div>
<!-- container ends-->
</section>
You set 2 times the attribute class.
Try with <img src="public/img/kelvindalegold.png" alt="..." class="img-fluid img-responsive">
image1
My background image don't load! Can anyone tell what's happening? Is it because of gatsby? Should I use gatsby-image instead?
background-image: url('/src/components/images/header.png');
background-size: cover;
background-position: center;
width: 100%;
}
<div id="page">
<div className='header'>
<h1>Header</h1>
</div>
<div>
<h1>About</h1>
</div>
<div>
<h1>Projects</h1>
</div>
</div>
We don't really have your code so we don't know which code you are using. But we do know which code does work and it is the following:
.header {
background-image: url("https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1");
background-size: cover;
background-position: center;
width: 100%;
}
<div class="header">
<h1>Header</h1>
</div>
The main difference perhaps is that in the CSS I use double quotation marks.
A basic full browser parallax background image can be achieved relatively simply with the following:
<div class = "parallax">
<!--image here -->
</div>
.parallex{
background: url(*url*);
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
I have attempted to put grid items inside the .parallax div and set individual background-image values on those:
<div class = "parallax">
<div id = "img1">
</div>
<div id = "img2">
</div>
<div id = "img3">
</div>
<!--etc-->
</div>
.parallex{
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
#image1{
background-image: url(*url1*);
}
#image2{
background-image: url(*url2*);
}
but that did not work. Any suggestions?
I have two Jumbotrons in one row, but can't figure out how to center the row on the page. I'm assuming it's some simple CSS that I'm missing. Any suggestions for me?
HTML:
<div class="container">
<div class="row">
<div class="well-lg">
<div class="one">
<div class="col-xs-6">
<div class="jumbotron text-center">
Button
</div>
</div>
</div>
<div class="two">
<div class="col-xs-6">
<div class="jumbotron text-center">
Button
</div>
</div>
</div>
</div>
</div>
</div>
My current CSS shouldn't be messing with it but I'll post it anyway.
.one .jumbotron
{ background: url("IMG") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:240px;
height:290px;
}
.two .jumbotron
{ background: url("IMG") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:240px;
height:290px;
}
This is the simple exapmple of two jumbotrons:
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-6">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
<div class="col-xs-6">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</div>
Solution 1: If I understood what you're trying to achieve here correctly, you want to remove the max-width value from your .jumbotron class entirely, just keep it at 100%.
In order to size the jumbotron, you can adjust the padding in classes .one and .two to achieve a centered jumbotron.
Doing so, however, would be recommended to also switch up the place of your classes. Put .one and .two class divs in your HTML inside the columns to avoid unnecessary column padding.
Solution 2: If you would rather keep your max-width setup on .jumbotron, you can adjust the margin for your .one and .two classes. Just use margin: 0 auto; and it should center anything inside of it.
In this case, you should also switch up your custom class placing like I told on the first solution.
I hope this helps!
Style your container class:
Add this code into your css file.
.container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
}
check fiddle: http://codepen.io/anon/pen/EPeLjV
I'm trying to produce a look for my mvc application that has a property from my model as a transparent background image then the title and a description as the text on the image, but I want the children of the div to not be transparent. I've looked around the internet, and have seen a few different ways to do it, like changing the background rgba to a certain value, but I can't seem to get it to work. Any help would be greatly appreciated. Thanks.
Here's my code
#foreach (var item in Model)
{
<div style="height: 250px; background-size: cover; opacity: .5; border-bottom: 3px solid #e3c340; background-image:url(#item.Image);background-size: 100% 100%; " class=" hidden-md hidden-lg img-responsive">
<div class="row" style=" background:rgba(56,255,255,0.1);;">
<h1 style="font-weight:bold;" >#item.Name </h1>
</div>
</div>
}
You can't make the background-image be semi-transparent if it isn't semi-transparent itself.
Lowering an elements opacity will do the same for it's children, which is quite logical, but can be frustrating at first.
Try this for example:
<div style="background-color: rgba(255, 0, 0, 0.5);">
<p>I am perfectly opaque!</p>
</div>
Here we set the background color to be semi-transparent.
If you want to do this with an image, you would need to put it on it's own layer like so:
<div style="position relative;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/some/path/image.jpg); background-size: cover; opacity: 0.5;"></div>
<p>I'm still opaque!</p>
</div>