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="" />
Related
I want my background image to take 50% of the div and the rest 50% to be text (the birthday text message) below it in a div which has flex-direction:column. Currently, the background image changes its height automatically (sometimes more than 50%, sometimes less than 50%) based on screen size, but I want it to always take 50% height with the "Birthday card image (Happy Birthday)" overlapping the envelope in the background as shown in the screenshot below, and the rest 50% for the text (birthday wish). How can I achieve that?
HTML file
<section class="normal-page">
<section class="e-greeting-design">
<div class="first-half">
<div class="first-half__bg-wrapper"> <img src="/assets/images/egreetingbg.png"></div>
<div class="first-half__img-wrapper"><img src="/assets/images/card-egreeting.png" alt=""></div>
</div>
<div class="second-half">
<div class="second-half__content-wrapper"><span>To: </span><span class="text-bold">Andy Raey</span>
<p class="text-bold">Happy Birthday! May you celebrate your 35th with all who are dear to you.</p>
</div>
</div>
</section>
</section>
SCSS File
.e-greeting-design {
width: 90%;
background-color: white;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1280px;
flex-direction: column;
margin-top: 20px;
> * {
flex: 1 1 100%;
}
.first-half {
position: relative;
&__bg-wrapper{
width: 100%;
object-fit: cover;
}
&__img-wrapper{
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
width: 70%;
}
img {
object-fit: cover;
width: 100%;
display: block;
}
}
.second-half {
&__content-wrapper{
max-width: 75%;
margin: 80px 60px;
> span,> p{
font-size: 32px;
color: #5C068C;
font-size: 20px;
line-height: 32px;
}
p {
margin-top:48px;
font-size: 20px;
line-height: 32px;
}
}
}
}
Current output
*How I want it to look like *
I have a prototype lightbox that will float the second element if the text within it exceeds 28 characters. What am I doing wrong??
This is my current CSS and HTML
// Parent Div
.lightbox-item {
z-index: 8200;
top: 50vh;
left: 50vw;
width: auto;
max-height: 650px;
height: auto;
display: inline-block;
background: #fff;
position: fixed;
}
// First Child div
.lightbox-item .avatarBox {
height: 155px;
width: 155px;
position: relative;
float: left;
padding: 0;
background: green;
}
// Second Child div
.lightbox-item .infoBox {
padding: 10px 5px 0 0;
height: auto
position: relative;
width: auto;
float: left;
background: orange;
}
// Third Child div
.lightbox-item .person-info-wrap {
width: 100%;
display: block !important;
position: relative;
z-index: 5;
height: auto;
clear: left;
}
// Secondary elements nested inside 2nd & 3rd Child div
.lightbox-item .infoBox .gallery-member_fullname{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-member_title{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-member_company{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-company_location{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .person-info {
padding: 10px 0 25px 0;
margin: 0 auto;
background-color: red;
color: #fff;
width: auto;
height: auto;
min-height: 275px;
}
.lightbox-item .person-info h3 {
text-transform: uppercase;
font-size: 1.5em;
font-weight: 600;
font-family: "Lato", sans-serif;
line-height: 30px;
width: 320px;
margin: 0 auto;
text-align: center;
}
<div class="lightbox-item" style="opacity: 1; transform: matrix(1, 0, 0, 1, -224.5, -226);">
<div class="avatarBox"></div>
<div class="infoBox">
<h2 class="gallery-member_fullname">Bill Gates</h2>
<div class="gallery-member_title">Founder</div>
<div class="gallery-member_company">Bill and Melinda Gates Found</div>
<div class="gallery-company_location">Nashville, TN 28277
<br>United States</div>
</div>
<div class="person-info-wrap" style="opacity: 1;">
<div class="person-info">
<h3>Active committees</h3>
<ul class="subList">
<li class="subList-item"></li>
</ul>
</div>
</div>
</div>
I have the first 2 divs floating to the left and then the 3rd element is set to block and clearing left. The result I'm trying to achieve is so that if the text expands in the 2nd child element the parent container ( lightbox-item) should expand as well.
THE REAL ISSUE
Sorry, I don't believe I made my problem clear. The second child element(infoBox) floats to the next line when the viewport size decrease below 768px I believe. The parent element expands as expect if viewport size is greater than ~768px.
You must use CSS Media Query to write a specific CSS for a special size
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
.lightbox-item {
z-index: 8200;
top: 50vh;
left: 50vw;
width: auto;
height: auto;
display: inline-block;
background: #fff;
position: fixed;
}
<div class="lightbox-item" style="opacity: 1; transform: matrix(1, 0, 0, 1, -224.5, -226);">
<div class="avatarBox"></div>
<div class="infoBox">
<h2 class="gallery-member_fullname">Bill Gates</h2>
<div class="gallery-member_title">Founder</div>
<div class="gallery-member_company">Bill and Melinda Gates Found</div>
<div class="gallery-company_location">Nashville, TN 28277<br>United States</div>
</div>
<div class="person-info-wrap" style="opacity: 1;">
<div class="person-info">
<h3>Active committees</h3>
</div>
</div>
</div>
Soooooo....
After some tinkering and 2 cups of coffee later. I changed the parent div from display: inline-block to display: inline-table See the change below.
.lightbox-item {
z-index: 8200;
top: 50vh;
left: 50vw;
width: auto;
height: auto;
display: inline-table;
background: #fff;
position: fixed;
}
AND Voila!
My lightbox works as I am expecting. I have other media queries to handle how the children divs stack on mobile.
I'm still open to other suggestions but this solved my problem the quickest without having to resort to restructuring the layout ( FlexBox).
Thanks for your input.
I need some help, I need to code this image:
This is what I have so far:
I tried adding a margin-top, padding-top, tried all combinations of position relative and absolute, I just need some ideias on how to do it.
This is how my code is structured:
<div class="background-oficina">
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="logo.png" alt="Oficina de Redação">
</div>
</div>
</div>
This is the css for the two classes that I'm using:
.background-oficina {
background: #fff url("bg-texture.png");
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
You could use an additional absolutely positioned element to which you assign the repeated background pattern and which you put behind the original element by using z-index: -1:
html, body {
margin: 0;
}
.background-oficina {
position: relative;
border: 1px solid #333;
border-bottom: none;
}
.bg-container {
position: absolute;
z-index: -1;
left: 0;
top;
width: 100%;
height: 120px; /* or whatever height is desired */
background: url("http://placehold.it/20x15/cff");
}
.text-center {
text-align: center;
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
<div class="background-oficina">
<div class="bg-container"></div>
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação">
</div>
</div>
</div>
Your trying this, you can set default height and width to parent div that consist of that logo then using position:absolute you can push that out of parent div, but don't add overflow:hidden to parent div or else it hides your image or element that you are trying to push outside parent div as hidden.
.background-oficina {
background: #fff url("https://via.placeholder.com/800x100/000") no-repeat;
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2);
background-size: 100% 100%;
width: 100%;
height: 100px;
position: relative; /*Add this*/
}
.logo {
padding-top: 50px;
margin: 0px auto;
position: absolute; /*Add this*/
bottom: -20px; /*Add this*/
}
<div class="background-oficina padding margin-bottom">
<div class="container">
<div class="col-xs-12 text-center margin-bottom">
<img class="logo" src="https://via.placeholder.com/50/ff2" alt="Oficina de Redação">
</div>
</div>
</div>
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>
Final resulting background image that I need:
Background image that I have used:
But I have got this Fiddle
::Summary of Fiddle::
HTML...
<div id="top-part">
<div id="topmost">
<div id="top-most" class="wrapper">
</div>
</div>
<div id="topmenu" class="wrapper">
</div>
CSS...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
}
#top-most{
height: 139px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
Update - to cover your recent edit
#header{
background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
opacity: .6;
width: 100%;
height: 189px;
}
Working Fiddle
You could try using the background property in CSS:
div{
background: url('path_to_your_image.jpg') no-repeat;
}
Learn more about using the background-image property here
Note:
There is a difference between background and background-image. In this answer I've used the background property which basically takes all of the possible options for a background image in CSS and lets them be used in a single call.
For example, you could split the above up into two selectors:
div{
background-image: url('path_to_your_image.jpg') no-repeat;
background-repeat: no-repeat;
}
You could do like this fiddle
html...
<div id="top-part">
<div id="topmost">
</div>
</div>
<div id="top-menu" class="wrapper">
<div id="topmenu">
</div>
</div>
css...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
height: 139px;
}
#top-menu{
background: url(img/bg-header-effects.png) no-repeat 50% 45%;
border-radius: 0 0 20px 20px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
The easy approach that I'm thinking of is having a picture within divs covering the whole page. The code will be very simple, but the only downside is the image may be warped or it can be clicked on unless you have this.
HTML:
<div id="backgroundcolor">
<div id="backgroundimage">
</div>
</div>
CSS:
#backgroundcolor {
background-color: #000;
z-index: 1;
}
#backgroundimage {
background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
resize: none;
object-position: center;
object-fit: initial;
}