body {
background: #111;
filter: opacity(1);
color: #eee;
}
#about::before {
background: url(/img/backgroud1.svg);
width: 100%;
height: 800px;
filter: opacity(0.01);
}
<!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>
</head>
<body>
<main>
<div id="about">
<h1>hello World</h1>
</div>
</main>
</body>
</html>
Can someone tell me why my background image is not displayed
I want my heading to be on top of a background image.
A ::before psuedo-element won't display anything if it doesn't have any content so give it some content
height and width do nothing on an element which is display: inline which ::before is by default
With an opacity as low as you are setting, it will be as good as invisible. Increase the opacity so you can see it.
You need to absolutely position the element (with a positioned container to anchor it) if you want the text to be on top of the image
body {
background: #111;
filter: opacity(1);
color: #eee;
}
#about {
position: relative;
}
#about::before {
background: url(http://placekitten.com/200/200);
width: 100%;
height: 800px;
filter: opacity(0.50);
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
}
<!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>
</head>
<body>
<main>
<div id="about">
<h1>hello World</h1>
</div>
</main>
</body>
</html>
you should put string marks in the url protion
background: url("/img/backgroud1.svg");
Related
I want that the <object> or <iframe> element has the same measures like its content.
Given are two simple html files.
square.html (want to inject into the main file)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
:root {
--hk-mes: 300px;
}
html,
body {
width: var(--hk-mes);
height: var(--hk-mes);
margin: 0;
padding: 0;
}
.square {
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html,
body {
margin: 0;
padding: 0;
display: inline-block;
}
.have-measures-of-content {
width: auto;
height: auto;
border: 0;
}
</style>
</head>
<body>
<object class="have-measures-of-content" data="./square.html"></object>
</body>
</html>
The <object> element has a size of 300px/150px (width/height). How can I make that it has automatically the size of its content, in this case 300px*300px, with plain html / css?
Another weird thing is that if I set the <object> or <iframe> manually to 300px/300px (width/height) the scrollbars don't disappear – I must set the height to 304px ... From where the 4px come from? The 4px come from display: inline-block. display: inline-flex doesn't add 4px to bottom ...
I am using div tag with a width of 100% and height of 100%. Under the div, I put my first image with 50% width. When I put second image with same 50% width, the second image is going to the bottom of first image. If I change the width to 49%, second image is aligning to the right side of first image (which is expected). Any way the width of div is 100%, why the second image is going down if I put width as 50% ?
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
<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>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
<img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
</body>
</html>
You can use CSS Display Flex Property.
For Ref: https://www.w3schools.com/css/css3_flexbox.asp
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
.flex_box{
display: flex;
}
<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>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="flex_box">
<img class="first-image" src="firstscreen.jpg" alt="first-image" />
<img class="second-image" src="secondscreen.jpg" alt="second-image" />
</div>
</body>
</html>
This is because white space also creates space in HTML.
It is the space between words, but the browser also respects spaces between HTML elements. Since there is a line-break and space between your two images you have a space between them. Remove these and the 50% width images also fit into one line.
If you set white-space: nowrap on your div you see the space more clearly (and also some scrollbars, since now the two images are bigger than the container and create some overflow)
As other answer said, best way to get rid of this is to just use flexbox for this kind of layout.
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
<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>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
<img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" /><img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
</body>
</html>
I am trying to create a simple ease-in-out transition on hover where the background colour increases from 50% of the viewport to 100% of the viewport.
<!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>
<style>
.container {
height: 100vh;
width: 50%;
background-color: #999;
transition: all 0.5s ease-in-out;
}
.container:hover{
/* width: 100% */
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
I have tried numerous combinations but cannot get a smooth transition. Is there a straight forward way to do this with a css transition or do I need to be looking towards using Javascript?
<!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>
<style>
.container {
height: 100vh;
width: 50%;
background-color: #999;
transition: all 0.70s ease-in-out;
}
.container:hover{
width: 100%
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
I think this is a smooth transition.
I am trying a simple border box here that does not seems to work for the height of my box
* {
box-sizing: border-box;
}
.div1 {
width: 500px;
height: 200px;
border: 5px solid #E18728;
float: left;
}
.div2 {
width: 90%;
height: 90%;
padding: 20%;
border: 4px solid black;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<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>
</head>
<body>
<div class="div1">
<p>This is the parent! </p>
<div class="div2">
<p>This is the child</p>
</div>
</div>
</body>
</html>
What seems to be the problem ? Width is okay, inside the box however height is not. Why ?
I am completely new to CSS and hope your answers will help me and others: I have found no solutions on the web.
Thank you from France
its your p tag as well as your padding:
* {
box-sizing: border-box;
}
.div1 {
width: 500px;
height: 200px;
border: 5px solid #E18728;
float: left;
}
.div2 {
width: 90%;
height: 90%;
border: 4px solid black;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<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>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
The problem is on the padding of the second div...
As stated here: MDN Web Docs - Padding
if you put the padding as a percentage (20%) then it refers to the width of the containing block. So, in your code, the padding you are applying a padding of 200*20/100 = 100px and that's forcing your div2 to grow to accomodate the paragraph inside.
Remove the padding or express it in absolute units and you're done!
So, I've researched how to make div 100% height of the screen, but if I put another div in HTML right below the first one, only the last div appears. I want to make website where each div behaves like a slide.
Here's the code I've used:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<title>Test portfolio</title>
</head>
<body>
<div id="wrapper" class="overlay"></div>
<div id="wrapper2" class="overlay">allooo</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
html, body{
background:url("backgrounds/escheresque_#2X.png");
min-height: 100%;
margin:0;
}
#wrapper{
height:100%;
background:#fff;
}
#wrapper2{
height:100%;
background:#c60;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10;
}
By setting each div to position: fixed you put each one of them on top of one another, relative to the viewport. Remove the .overlay class and you’ll display them one below the other. If you want to have only one at the screen at a time and no scrollbar you’ll have to resort to using JavaScript.
And here is a link to an example with one following the other http://jsbin.com/UvOXUXI/1/