Lets suppose we have window with horizontal scroll.
There is another block on the page. If set it position: relative and set top: 20px does it mean that 20px from top of window in visible area or including scroll?
Here is demo of your question. Not sure if this answers your question, feel free to edit.
https://jsfiddle.net/joshmoto/zbc12ayu/1/
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css";
.scroll-x {
overflow-x: scroll;
height: 400px;
border: 2px dotted #e83e8c;
}
.top-block {
position: relative;
top: 20px;
height: 40px;
background: rgba(0,0,0,0.75);
color: #ffffff;
line-height: 40px;
text-align: center;
}
.scolling-content {
background-image: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
width: 2560px;
height: 400px;
}
<div class="container mt-3">
<h4 class="mt-3 mb-3">Scroll Horizontal</h4>
<div class="scroll-x">
<div class="top-block"><code>position: relative; top: 20px;</code></div>
<div class="scolling-content"></div>
</div>
</div>
Related
attached a js fiddle to show my issue. I want the orange image to take all the top area of the card and not have padding on the top and sides. the image should show from the very top and takes all the sides with no space
link to fiddle
.pricing-card {
color: black;
width: 100%;
max-width: 330px;
max-height: 463px;
flex-flow: column;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 10px 70px #2e231d1a;
border-radius: 50px;
opacity: 1;
min-height: 550px;
margin: auto;
}
#logo {
top: 50px;
position: absolute;
left: 50px;
}
#rectangle {
max-width: 330px;
}
<div class="price-container">
<div v-if="checkDomainTrial" class="price-text">
Get your entire first month free on us!
</div>
<div class="header">
<div id="wait">Wait! Don't go yet!</div>
</div>
<div class="pricing-card">
<div class="pricing-card-header">
<img id="rectangle" src="https://i.ibb.co/FVkvCv5/Rectangle-cancellation.png" alt="" />
I have an image and some text inside. But it make hard to read because the image is too light. I want to make it a little dark at the bottom so the text can appear more clearly. How can I do that? Thank you!
This image is described what I've mentioned:
Here is my code:
.image {
height: 450px;
position: relative;
width: 256px;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
}
.image__text {
font-size: 2rem;
position: absolute;
bottom: 1%;
left: 20%;
line-height: 50px;
}
<div class="image">
<div class="image__child">
<img alt="img" src="https://lh3.googleusercontent.com/-MVd7NWMh1oI/Vqrtx00GXQI/AAAAAAAAWT8/PRBTjxMENbY/s800-Ic42/ch%2525C3%2525B3-teacup-pomeranian.jpg" />
</div>
<div class="image__text">SOME TEXT</div>
</div>
If your only goal is to make the text more visible you could just add a text shadow.
.image__text {
text-shadow : 1px 1px black;
}
Otherwhise you can add an overlayer with a gradient that goes from black to trasparent
.image {
height: fit-content;
position: relative;
width: fit-content;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
z-index:1;
}
.image::after{
content:"";
position:absolute;
background: linear-gradient(0deg, rgba(39,38,42,1) 0%, rgba(255,255,255,0) 60%);
z-index:2;
height:100%;
width:100%;
top:0;
left:0;
}
.image__text {
font-size: 2rem;
position: absolute;
bottom: 10%;
left: 20%;
line-height: 50px;
z-index:3
}
<div class="image">
<div class="image__child">
<img alt="img" src="https://lh3.googleusercontent.com/-MVd7NWMh1oI/Vqrtx00GXQI/AAAAAAAAWT8/PRBTjxMENbY/s800-Ic42/ch%2525C3%2525B3-teacup-pomeranian.jpg" />
</div>
<div class="image__text">SOME TEXT</div>
</div>
I would suggest using a background-image gradient overlay and add the source via the css as illustrated below under background-image. It may take a moment to fiddle with the percentages to make sure the right portions are overlaid with the gradient, and with the degrees as well. Can check out the docs on css gradients for more info - https://www.w3schools.com/cssref/func_linear-gradient.asp
.image {
background-image:
linear-gradient(190deg, rgba(white, 10%), rgba(black, 100%)),
url('images/insert background image.jpg');
height: 450px;
position: relative;
width: 256px;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
}
With this you can then place the text inside the div - as the image becomes the background of the div.
There is also the option of placing the text in the div with the image and just giving that a background color and sizing it accordingly.
I need to have a second image align left of the text but layered on top of the background image. I am having some trouble figuring out what css I need to make this work. Currently everything I have tried messes with the text positioning or the background image.
Luckily, this is a personal project so there is no timeline but I would appreciate any help that could be given.
I just started learning web development this past year so it all still feels a little new to me.
.hero-full-container {
height: 100vh;
position: relative
}
.background-image-container {
background-size: cover;
background-repeat: no-repeat;
background-position: 50%
}
.white-text-container h1 {
color: #fff
}
.overlay-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), transparent);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .3) 0, transparent 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, transparent);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#4D000000", endColorstr="#00000000", GradientType=0)
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
.row {
margin-left: -15px;
margin-right: -15px
}
.col-xs-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px
}
.col-md-7 {
width: 58.33333%
}
.col-md-offset-1 {
margin-left: 8.33333%
}
.hero-full-wrapper .text-content {
padding-top: 30%
}
<div class="hero-full-container background-image-container white-text-container" style="background-image:url('./assets/images/home_01.jpg')">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7 col-md-offset-1">
<div class="hero-full-wrapper">
<div class="text-content">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
<!--<p>Lorem ipsum</p>-->
</div>
</div>
</div>
</div>
</div>
</div>
I don't undestand very well your question, but if you want to have a background image and another image above this image, you can do this creating more div. Once you insert a background image, you can insert another div inside this div, e.g. :
<div class="main-container">
<div class="second-image">
<img src="link_to_your_image">
</div>
<div class="text-area">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
</div>
</div>
and the for css, you can use flex property, setting the direction to flex-direction: row, e.g. :
*{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.main-container {
width: 100%;
height: 100%;
background-image: url('link_to_your_image');
background-color: red;
display: flex;
flex-direction: row;
align-items: center;
}
.second-image, .text-area {
margin-left: 50px;
}
I hope this can help you, have a nice day.
I am working at a mobile bottom navigation bar. Here is the code I developed:
body {
background-color: #ff0000;
}
.mobile_bottombar {
display: flex;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 12px;
background-color: #fff;
z-index: 999;
}
.des:before { /* creates the circle */
position: absolute;
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z'/></svg>");
width: 66px;
height: 66px;
top: -45px;
left: calc(50% - 33px);
border-radius: 50%;
background-color: #188071;
justify-content: center;
align-items: center;
display: flex;
}
.des {
border-radius: 6px;
background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);
}
<div class="mobile_bottombar des">
<div class="bottombar_item" onclick="switchPage(2, 'main', true)">
<div>
<span>Sepp</span>
</div>
</div>
<div style="margin-right: 20px;" class="bottombar_item" onclick="switchPage(3, 'noteslist', true)">
<div>
<span>Depp</span>
</div>
</div>
<div style="margin-left: 20px;" class="bottombar_item">
<div>
<span>Mepp</span>
</div>
</div>
<div class="bottombar_item" onclick="switchPage(4, 'permission', true)">
<div>
<span>Repp</span>
</div>
</div>
</div>
My problem is that the radius which is cut of the div is another radius than the blue circle. Or maybe there is the other problem which I do not know? Anyway, that looks very weired, because of the different space around the circle. But how to fix that?
~marcelo
You can try #Temani's comment or if you want to stick to your method continue the reading.
I think that there is no relative way to do it so all you can do is hard-changing the value of the radial-gradient in the .des rule like this:
background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);
I also advice you to remove the box-shadowand replace it with
filter: drop-shadow(0px -2px 1px black);
instead, because we can see the shadow crossing the transparent area.
i have been trying to place the grandient on top of the image and behind the text but everything i tried from what i could find out in web didnt worked.
i would need to have the source of the image in the div cause if its in the css code it will apply the same image to all other templates i create.
thanks :)
<div class="titles">
<div class="thumb">
<img class="img overlay"
height=260px
width=240px
alt="Shokugeki no Souma: Ni no Sara"
src="https://img7.anidb.net/pics/anime/184719.jpg" />
<div class="titulo">Shokugeki no Souma: Ni no Sara</div>
<div class="epis">Epis. 12</div>
</div>
.titles .thumb {
position: relative;
float: left;
height: 260px;
width: 245px;
max-height: 260px;
max-width: 260px;
margin: 0 auto;
padding: 5px;
}
.thumb .titulo {
position: absolute;
bottom: 0;
left: 0;
padding: 8px;
margin: 5px;
font-size: 15px;
font-weight: bold;
color: white;
}
.thumb .epis {
position: absolute;
top: 0;
right: 0;
padding: 8px;
margin: 10px;
font-size: 15px;
font-weight: bold;
color: white;
}
.titles .thumb .img:hover {
max-height: 260px;
max-width: 260px;
height: 260px;
width: 240px;
opacity: 0.8;
}
.img.overlay {
background: linear-gradient(
to bottom,
black,
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
black);
}
Do you mind explaining a bit more about what is going wrong when you try to implement this?
My suggestion would be to put the overlay in its own separate div instead of inside the image tag. Then close the overlay div before you start your caption div. Then you can set your "thumb" class to have a certain width and height in your css, and style the overlay div to have height:100% width:100%so that it completely covers your thumbnail image. If you absolutely position the caption text, you can place it on top of the gradient. For example
<div class="titles">
<div class="thumb">
<img alt="Shokugeki no Souma: Ni no Sara" src="https://img7.anidb.net/pics/anime/184719.jpg" />
<div class="overlay"></div>
<div class="titulo">Shokugeki no Souma: Ni no Sara</div>
<div class="epis">Epis. 12</div>
</div>
</div>