I would like to convert a rectangular image to a square image, but without losing information about the original image. My idea was to create a square image, then I would blur it and I would overlay the rectangular image on it, so something similar:
All this should use HTML+CSS only. To do this, I use Photoshop right now but a way to replicate this behavior using CSS would be amazing because it would save me a lot of time.
I don't have any idea how to do that because the main problem is that the rectangular image should have the same height (or width, if width > height) as the square blurred image and it should be responsive (so no fixed size, it depends on the size of the original image).
HTML
<!-- index.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>Image Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image Box</h1>
<div class="image-box"></div>
</body>
</html>
CSS
/* style.css */
.image-box {
padding-bottom: 100%;
position: relative;
background-image: url(image.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.image-box::before,
.image-box::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
}
.image-box::before {
backdrop-filter: blur(10px) brightness(0.8);
}
.image-box::after {
background-image: inherit;
background-size: contain;
background-position: inherit;
background-repeat: inherit;
}
I need a wordpress theme or any plugin which looks like https://www.haldiram.com/ this and work like this. I want to make same home page and header in wordpress, can anyone help me about this in wordpress. Tell me how the same thing is possible using any plugin or using any theme, or tell any another way to do this. I try make background like this using css but didn't get success. i dosen't need exact same but if someting smillar to this tell me.
The important thing is to add the background-attachment: fixed; CSS property.
Also you need to have the page content height bigger than the window in order to see the scroll effect.
In the demo below I added a min-height: 2500px; on the .site-content page element.
body {
background-image: url("https://www.haldiram.com/themes/haldiram/images/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.site-content {
width: 100%;
max-width: 1200px;
min-height: 2500px;
background-color: #fff;
padding: 2rem 3rem;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="site-content">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div><!-- .site-content end -->
</body>
</html>
How do I use margin or padding for pseudo element :before to give enough space between image and number
Look here in this link for screenshot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<ul>
<li>city</li>
<li>email</li>
<li>adress</li>
<li>0202020202</li>
</ul>
</div>
</body>
</html>
the code is here
Thanks a lot in advance for your help
Another solution is to show the pic as a background. Then you can positioning easily your icon.
ul li:nth-child(4)::before {
content: '';
background: transparent url(image.png) no-repeat right top;
background-size: contain;
position: absolute;
width: 25px;
height: 30px;
left: -30px;
top: 0;
}
Here in your code
Based on your desired prnscrn
You need to play around with the margin-left of the :before pseudo selector and put bottom on 0. With the below CSS it should result correctly:
Here's a working fiddle.
CSS
li:nth-child(4)::before {
content: url('https://image.prntscr.com/image/RsidxDk_QzytthM_zz4H8Q.png');
position: absolute;
margin-left: -2.7em;
bottom: 0;
zoom: 0.8;
}
Use zoom in this instance to reduce the size and use for margin-left the unit em so it will take the font-size of the element. (Be also aware that there are a lot of errors in your provided CSS).
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
picture element don't respect viewport meta tag.
Any one know how can I solve this?
I have this html:
<!DOCTYPE html>
<head>
<title>dpi</title>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
<style type='text/css'>
body { padding: 50px }
div.dpi {
background-image: url(dpi.png);
background-repeat: no-repeat;
background-size: 32px 32px;
width: 32px;
height: 32px;
display: inline-block
}
#media (min-width: 361px) {
div.dpi {
background-image: url(dpi_sm.png);
background-color: red;
}
}
</style>
</head>
<body>
<div class='dpi'></div>
<br>
<picture>
<source media='(min-width: 361px)' srcset='dpi_sm.png'>
<img src='dpi.png' alt='' width='32' height='32'>
</picture>
</body>
when it runs in a standard desktop with a 1366px resolution, the picture element loads dpi_sm.png as expected.
however, when it runs in a android device, it keeps loading the dpi_sm.png image.
I tested, and it only loads the dpi.png image when I set the media to "(min-width: 981px)". It should consider the meta tag viewport, shouldn't it? But the zoom is being the default 980px, even when the viewport meta tag is there
The div and css media query works fine in both cases. Just the picture element is being a problem.