So I'm having a hard time making an image with a psuedo element
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
And Here's the CSS:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('./Path\ 14#2x.png');
position: absolute;
display: inline-block;
background-size: 30% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
Here's how the code looks when you see it:
I want the image to take 100% of the width instead of repeating like that maybe the image is too small but I can't find a bigger image
Here's the image
THANK YOU IN ADVANCE
Try this, I added background-repeat: no-repeat; and then change the background size to background-size: 100% 100%;
See working example here:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('https://i.imgur.com/TEKMxzx.png');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
background-size: 100% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
Related
I want to insert divs as event entries in a "div_outside". The event entry should take 100% of the width if there is no other entry next to it. If there is another entry next to it, they should both be the same size next to each other.
My current code looks like this, but doesnt work:
test.css:
.column_div{
position: relative;
width: 200px;
height: 800px;
margin-top: 20px;
margin-left: 20px;
border: solid black;
}
.new_event1{
position: relative;
width: 100%;
height: 30px;
float: left;
background-color: red;
}
.new_event2{
position: relative;
width: 100%;
height: 30px;
float: left;
background-color: green;
}
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="column_div" id="column_div"></div>
<script src="test.js" defer></script>
</body>
</html>
test.js:
column_div = document.getElementById("column_div")
new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");
column_div.appendChild(new_event1)
new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");
column_div.appendChild(new_event2)
How i can do that with html and css?
If I understand you correctly, the display: flex CSS attribute is what you're looking for.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.div_outside {
border: 2px solid black;
display: flex;
}
.div_outside > div {
border: 2px solid red;
display: flex;
justify-content: center;
align-items: center;
background: blue;
height: 300px;
width: 100%;
}
</style>
</head>
<body>
<div class="div_outside">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</body>
</html>
you didn't actually explain clearly what exactly you want but I think what you mean is that you want divs to be in a row with equal space. and if there is only one div, it should take 100% width. is that it? check the code and let me know if this is what you want or not.
for that, you need to make the parent display: flex: with flex-direction: row: and you don't need to use float.
column_div = document.getElementById("column_div")
new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");
column_div.appendChild(new_event1)
new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");
column_div.appendChild(new_event2)
// new_event3 = document.createElement("div")
// new_event3.classList.add("new_event3");
// column_div.appendChild(new_event3)
.column_div{
position: relative;
width: 200px;
height: 800px;
margin-top: 20px;
margin-left: 20px;
border: solid black;
display: flex;
flex-direction: row;
}
.new_event1{
position: relative;
width: 100%;
height: 30px;
background-color: red;
}
.new_event2{
position: relative;
width: 100%;
height: 30px;
background-color: green;
}
/*
.new_event3{
position: relative;
width: 100%;
height: 30px;
background-color: yellow;
} */
<body>
<div class="column_div" id="column_div"></div>
</body>
This is my HTML with styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
I wanted a circle that was slightly cut on both left & right sides(mobile) and up & down (for desktop) so i thought this was the best way but what I observe is that the page also ends up with extra width on mobile and extra height on desktop, I don't want this to happen.
Is there any way deal with this so the circles remain cut and removing the scrolling?
Use heigth: 100% and width: 100% and overflow: hidden on your html tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100%;
width: 100%;
overflow: hidden;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
How do I make the background image looks like it's under the header?
https://public.brayzenchase.repl.co/
* {
margin: 0;
padding: 0;
}
header {
height: 100px;
width: 100%;
background-color: rgba(232, 238, 242, 0.3);
position: sticky;
top: 0;
border-bottom: 3px solid #37393A;
display: flex;
align-items: center;
justify-content: center;
}
section {
height: 100vh;
width: 100%;
background-image: url('https://public.brayzenchase.repl.co/IMG_0290.JPG');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>Sticky Transparent Header</header>
<section></section>
</body>
</html>
Appending the background image to body will do the trick. You are appending it to section, which comes after the header.
* {
margin: 0;
padding: 0;
}
header {
height: 100px;
width: 100%;
background-color: rgba(232, 238, 242, 0.3);
position: sticky;
top: 0;
border-bottom: 3px solid #37393A;
display: flex;
align-items: center;
justify-content: center;
}
body {
height: 100vh;
width: 100%;
background-image: url('https://public.brayzenchase.repl.co/IMG_0290.JPG');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>Sticky Transparent Header</header>
<section></section>
</body>
</html>
So I want to achieve the following which i drew:
and the green div is the outer div and inside the div, there is a div which i plan to use for a map. Now the problem I'm facing now is how to I place the div at the bottom of the outer div? I want it to be somehow locked in that position so when I resize the browser, it would stay at its current position and the map div won't move around.
I tried using "margin-top: 59vh" but when i adjust the height of my browser it overflows and becomes weird:
Would appreciate some help on this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
}
#map_div {
border: 1px solid blue;
height: 300px;
margin-top: 59vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
Remove margin-top: 59vh from #map_div and add display: flex, flex-direction: column, and justify-content: flex-end to #outer
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#map_div {
border: 1px solid blue;
height: 300px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
I'm trying to add a background-image to a div at the top of the webpage and i want it to be responsive as well. i got the code for a hero image from w3school and i did it exactly as shown but still the image doesn't show up. i'm 100% sure that the path for the image is correct as i've used it multiple times on the same page and it works just fine. i'll provide all the info below, any hep would be hugely appreciated.
Html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kendrick 🔥</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="body-container">
<div class="navbar">
Kendrick Lamar
</div>
<div class="kendrick"></div>
</body>
</html>
CSS:
#viewport {
width: device-width ;
zoom: 1.0 ;
}
html, body{
height: 100%;
margin: 0;
background-color: #fdfcfa;
}
.body-container {
min-height: 100%;
}
.navbar{
height: auto;
background-color: #1c2120;
}
.navbar a{
color: #FBFBFB;
text-decoration: none;
text-transform: uppercase;
width: auto;
margin: auto;
font-size: 3.5em;
font-family: fantasy;
}
.kendrick {
background-image: url("/images/kendrick!.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}