I've been given the following code:
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
width: 50vw;
}
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: calc(100% - 4em);
justify-content: center;
padding: 2em;
text-align: center;
width: calc(100% - 4em);
}
.small {
color: #e9e9e9;
font-size: .7em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The background</title>
</head>
<body>
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can
understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
</body>
</html>
There are two goals here:
Make it work with ::after instead of ::before
There is a missing line of code somewhere in CSS and its absence ruins everything. Add the missing property to the right place to make it look as intended.
I've found the missing line of code (content: "";), and replaced ::before with ::after, here's where I got:
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}
I'm struggling to get the background image to expand to it's full size, because otherwise the task is solved. The code editor tells me task 2 is correct, but for some reason task 1 is not being accepted and I assume it has to do with the image size, but I might be wrong.
Ideally it should look like this: https://ucarecdn.com/d24c1329-c0a3-4bd6-948c-5cfd83466c86/
Super appreciate any help with this!
Try to use this, with .container {width: 50vw;}
.container::after {
content: '';
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(0.5);
position: absolute;
top: 50%; /* changed */
left: 50%; /* changed */
bottom: 0; /* added */
right: 0; /* added */
width: 100vw; /* changed */
height: 100vh; /* changed */
transform: translate(-50%, -50%); /* added */
z-index: -1;
}
The result:
* {
margin: 0; /* added */
padding: 0; /* added */
box-sizing: border-box; /* added */
}
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
width: 50vw;
}
.container::after {
content: '';
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(0.5);
position: absolute;
top: 50%; /* changed */
left: 50%; /* changed */
bottom: 0; /* added */
right: 0; /* added */
width: calc(100vw - 30px); /* changed 3 times */
height: calc(100vh - 30px); /* changed 2 times */
transform: translate(-50%, -50%); /* added */
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: 100%; /* changed */
justify-content: center;
padding: 2em;
text-align: center;
width: 100%; /* changed */
}
.small {
color: #e9e9e9;
font-size: 0.7em;
}
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
As Mihai T pointed out, the issue is with width. I simply removed width from the first container and it solved the problem.
FINAL SOLUTION
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
}
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: calc(100% - 4em);
justify-content: center;
padding: 2em;
text-align: center;
width: calc(100% - 4em);
}
.small {
color: #e9e9e9;
font-size: .7em;
}
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
Related
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg') center / cover;
}
.line_horiz {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.line_vert {
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(255, 255, 255, 1);
top: 20%;
left: 0;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line_vert"></span>
<span class="line_horiz"></span>
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
As the horizontal and vertical lines are styling rather than informational content one suggestion is to remove them from the body of the HTML and instead create them using linear gradients on the background of the fullscreen element. That way they don't for example get looked at by screen readers. Also, using linear gradients means we can have 'gaps' in the lines where we want them.
This snippet just does the calculation of the gap for the btn element as the logo element has background white so it doesn't matter that the 'line' goes right across. If this changes then put in a linear gradient with gap calculations in a similar way to that done for the btn.
Note, box-sizing with content has been used and explicitly stated (so borders are included in the calculations and padding is set to zero) in case it has been altered elsewhere in the code.
body {
width: 100vw;
height: 100vh;
}
.fullscreen {
/* set up some variables to make it easier to change things later if you want to */
--logoMid: calc(20% - var(--borderW));
--btnW: 100px;
--btnMid: 50%;
/* position from the top to the middle of the btn */
--borderW: 3px;
--btnTop: calc(var(--btnMid) - (var(--btnW) / 2) - (var(--borderW) / 2));
/* actual position of top of btn element */
--btnBottom: calc(var(--btnTop) + var(--btnW) + var(--borderW));
box-sizing: content-box;
height: 100%;
width: 100%;
background-image: linear-gradient(white 0%, white var(--btnTop), transparent var(--btnTop), transparent var(--btnBottom), white var(--btnBottom), white 100%), linear-gradient(to right, white 0, white 100%), url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg');
background-size: var(--borderW) 100%, 100% var(--borderW), cover;
background-position: calc(var(--btnMid) - (var(--borderW) / 2)) 0, 0 var(--logoMid), center top;
background-repeat: no-repeat no-repeat;
margin: 0;
padding: 0;
position: relative;
}
.logo-img {
box-sizing: content-box;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.btn {
box-sizing: content-box;
margin: 0;
padding: 0;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
box-sizing: content-box;
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
Note: run the snippet in full screen as there won't be enough room to show the gap between the logo and btn on the small snippet viewport.
Here is my solution, Its not perfect, but it will give you a good starting points.
I have changes your HTML structure, by removing the divs that create the lines, Instead, I have used pseudo selectors to draw the lines.
Note that, you will have to tweak some of these numbers to properly fit your content.
Please run the example in full screen mode
.fullscreen {
height: 100vh;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center/cover;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 100px;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.logo-img:before {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
left: 130px;
display: block;
}
.logo-img:after {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
right: 130px;
display: block;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}
.btn .inner {
width: 100%;
height: 100%;
background: white;
}
.btn:after {
content: "";
display: block;
width: 3px;
height: calc(50vh - 48px);
background: #ffffff;
position: absolute;
top: 100%;
left: 50%;
}
.btn:before {
content: "";
display: block;
width: 3px;
top: calc(-50vh + 220px);
background: #ffffff;
position: absolute;
bottom: 100%;
left: 50%;
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn">
<div class="inner"></div>
</div>
</div>
I have the following code, that I am looking to make responsive for mobile display:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!DOCTYPE html>
<html>
<head>
<title>Login Retrieve</title>
</head>
<body>
<div class="container" id="container" style="min-height: 530px !important;margin-top: 5%;">
<div class="form-container log-in-container" style=" background: white;">
Hellow world
</div>
<div class="overlay-container" style="background-image:url('/assets/iphone.png'); background-repeat: no-repeat;
background-size: 100%;">
<div class="overlay-right" style="color: white;font-weight: 600;margin-top: 94%;margin-left: 14px;">
Test 1233
</div>
</div>
</div>
</body>
</html>
I thought that adding the first line would help, but it doesnt. The two containers are still showing next to each others.
Is there a way to fix it with css only (ideally).
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
}
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
}
.overlay {
background: #44B5EB;
background: -webkit-linear-gradient(to right, #44B5EB, #0daaf5);
background: linear-gradient(to right, #44B5EB, #0daaf5);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
}
.myClass {
background: image-url('Admiralty.png');
}
I have just added the styling that I am currently using.
Use a media query. I would also suggest removing your inline styling as well as the !important property - This will override any other elements you style.
Ok, I found some sort of solution, not sure if it is the most elegant, but this is isL: I replace the straight:
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
with :
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
}
#media only screen
and (max-width : 1224px) {
.log-in-container {
left: 0;
width: 100%;
z-index: 2;
}
}
So i adjust the width of the container based on the size of the screen, choosing 1224px as the threshold
I have a simple css styling question. I've been trying to create this effect on a background to match a design but i just can't seem to get it right.
Here is what I have
And here is the design
does anyone have any tips to help me create that background effect? any help would be appreciated.
My code right now, if it helps:
.backgroundOverlay {
background-image: url('../images/background-pattern.png'), linear-
gradient(to bottom right, rgba(0,118,255,0.8), rgba(0,197,255,0.8));
/* opacity: 0.3; */
height: 100vh;
width: 100vw;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* padding: 15vw 5vw; */
}
The background image is just a repeated .png file
Thank you in advance
Use this:
.container{
width: 100%;
height: 300px;
border: 1px solid #000;
position: relative;
}
.container .content{
position: absolute;
z-index:999;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container::after{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index:99;
background-image: url("path/to/yourfile.png");
background-size: repeat;
opacity: 0.4;
}
<div class="container">
<div class="content">
<img src="path/to/your/upper_frame.png" />
</div>
</div>
I am trying to produce this effect with CSS. I have tried creating a box with a triangle and then using negative margin to overlap it onto the circle, but cannot get it right.
Many thanks for any help.
fiddle
https://jsfiddle.net/Hastig/n3w0tztv/
Getting the circle to stay vertically centered and have the text container min-height the height of circle is tricky and is not worked out in this example. A cheap fix is adding align-items: center to .container at a breakpoint with #media.
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: white;
height: 100vh;
}
.container {
display: flex;
width: 100%;
padding: 10px;
overflow: hidden;
}
.left {
position: relative;
display: flex;
width: 150px;
height: 150px;
margin-top: -4px;
margin-bottom: -4px;
margin-right: -17px;
background-color: #ec847c;;
border-style: solid;
border-color: white;
border-width: 4px;
border-radius: 100%;
z-index: 10;
}
.right {
position: relative;
display: flex;
flex: 2;
font-size: 20px;
color: white;
background-color: #4ca132;
}
.square {
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: white;
overflow: hidden;
}
.square-top { top: 0; }
.square-btm { bottom: 0; }
.square::before {
content: "";
position: absolute;
display: flex;
width: 100%;
height: 100%;
transform: rotate(45deg) scale(2);
background-color: #4ca132;
z-index: 1;
}
.square-top::before { top: 50%; left: 50%; }
.square-btm::before { bottom: 50%; left: 50%; }
.text {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 20px 20px 40px;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="square square-top"></div>
<div class="square square-btm"></div>
<div class="text">
Roles play an extremely important part in family funtion.
</div>
</div>
</div>
I have an issue with my CSS based page.
I would like to change the background-image on mouse-over the two div and point to another page when click.
I have 3 issues:
The change of background works fine when the screen is in portrait resolution but not in landscape.
I would like to have a fade animation on the background change but I couldn't figure out how.
I would need div1 and div2 to be link so that not only the background change, it also point to another page if user click. I couldn't add on the div without blocking the flex display.
Thank you!
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
text-align: center;
}
#media screen and (orientation:landscape) {
.container {
position: absolute;
display: flex;
width: 75vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 32.5vmin;
height: 100vmin;
background-color: #ddd;
}
}
#media screen and (orientation:portrait) {
.container {
position: absolute;
display: flex;
width: 100vmin;
height: 133vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50vmin;
height: 133vmin;
background-color: hsla(0, 0%, 0%, 0.1);
}
}
.background1,
.background2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: -1;
}
.background1 {
background: url("http://i.imgur.com/zFYHM67.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.background2 {
background: url("http://i.imgur.com/nYKEFNF.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.div1:hover~.background1 {
display: flex;
}
.div2:hover~.background2 {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="div1">Div 1</div>
<div class="background1"></div>
<div class="div2">Div 2</div>
<div class="background2"></div>
</div>
</body>
</html>
I made some changes in your code (mainly css) see the snippet below:
for issue 1 : you were using #media screen and (orientation:portrait) so the style inside only works for portrait
for issue 2 : i used opacity and transition to have an animation effect
for issue 3: i just changed div tag to a tag
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
text-align: center;
}
#media screen and (orientation:landscape) {
.container {
position: absolute;
display: flex;
width: 75vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 32.5vmin;
height: 100vmin;
background-color: #ddd;
}
}
.container {
position: absolute;
display: flex;
width: 100vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50vmin;
height: 100vmin;
background-color: hsla(0, 0%, 0%, 0.1);
}
.background1,
.background2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: all 1s;
}
.background1 {
background: url("https://www.w3schools.com/css/img_fjords.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.background2 {
background: url("https://www.w3schools.com/howto/img_mountains.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.div1:hover~.background1 {
display: flex;
opacity: 1;
}
.div2:hover~.background2 {
display: flex;
opacity: 1;
}
<div class="container">
Div 1
<div class="background1"></div>
Div 2
<div class="background2"></div>
</div>