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;
}
Related
Problem
I am having an issue with getting the height of a responsive content box to fill the screen vertically. everything including widths adjust fine to resizing in Dev Tools however when I adjust the content box height in the CSS code, I am only able to enter static heights in px (483 in code below). When I try to set the height to 100%, my google map which is in the content box, disappears. The map resizes fine as I manually adjust the content box contenta height so that seems to be functioning properly. I have the meta tag as
<meta content="width=device-width, height=device-height, initial-scale=1.0" charset="utf-8">
Searching other questions hasn't resulted in any solutions.
Question
Is there coding that I am missing that allows the responsive content box to fill vertically?
working test page
CSS
body {
font-family: Arial, Helvetica, sans-serif;
width: 99%;
height:100%;
background-color: #52669c;
}
#map {
width:100%;
height:100%;
border-radius: 15px;
}
#contenta {
float: left;
background: #0099ff;
width: 95%;
height: 483px;
}
#rightcolumn {
background: #FFFFFF;
width: 2%;
float: left;
}
Use this template in your html for full width and full height
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://saltwx.com/css/responsive.css">
<title>My website</title>
<!--
rest of your <head>
-->
</head>
<body>
<div class="page-wrapper">
<!--
rest of your <body>
-->
</div>
</body>
</html>
with this css
html, body, .page-wrapper {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
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).
Surprisingly (at least to me), when I use the ipad emulator in Chrome, I see a very different layout than when I launch my iPad webapp:
- in chrome : screenshot of chrome version
- on my ipad : screnshot of ipad version
The background resolution is 2732x2048.
images and fonts absolutely don't have the same size
the bottom selectors, which are absoluted position with bottom:0 won't end up at the same location
a few background lines are missing on the bottom part of the ipad version
the page html is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, width=device-width">
<style>
body {position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-image: url('images/rl-background-grid.jpg');
background-repeat: no-repeat;
background-size: cover;}
.navigation {bottom: 0px;
height: 100px;
position: absolute;
width: 100%;
box-sizing: border-box;
font-size: 18px;
color: #000000;}
</style>
</head>
<body>
<div class="navigation">
This is a test
</div>
</body>
</html>
You can find the actual page here :
http://rl.manuelracim.com/test/test.html
Am I missing something obvious in my header? Or is it a problem that all my CSS rules are expressed in px?
Any pointer/help appreciated!
Thanks
I am having my image size of width 1800px and height 200px i want to create a jumbotron where the image should fit to that jumbotron means the jumbotron size should also be that so I can see my full picture and it should also be responsive
my Code..
<style>
.jumbotron1{
background-image: url(/img/ffHeadernologo.png);
background-size: cover;
text-align: center;
width:100%;
padding-bottom: 11.1111% /* ( 1800 / 200 ) = 9; 100 / 9 = 11.1111 */
max-height: 100%;
overflow: hidden;
}
</style>
What I wants to do is..
This my background
and I also have logo as follow
the logo should be in another div and backround has been set as above its working fine.
I want the result like this
How can I do that the above solution is not working great with this what to do?
any suggestions I have seen the earlier Same Question but its not working so I have asked it again.
in third image the black line has been removed that has to be there.
Thank You
just add the responsive-img class to the class attribute of your image tag
Edit:
Because you are using background-image us this css
CSS
<style>
.jumbotron1{
background-image: url(/img/ffHeadernologo.png);
background-size: cover;
text-align: center;
width:100%;
height: 200px;
overflow: hidden;
}
</style>
note that this will keep the aspect ratio intact but if the screen is taller than that aspect ratio it will show space above and below, on the other hand if the screen is skinnier than that aspect ratio it will crop the right hand side of the image
EDIT:
It seems you just want a background image. I that case I suggest that you just use the following css
body {
background: url(/img/ffHeadernologo.png) no-repeat center center fixed;
background-size: cover;
}
EDIT:
You are actually trying to make a header with a background. To do that you can use this
CSS
(Demo)
.jumbotron {
background: url(http://placehold.it/1800x200/225599/ffffff) no-repeat center center fixed;
background-size: cover;
height: 200px;
}
Check this example i simply used the background:url() technique
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
.jumbotron{ background: url(http://cdn.superbwallpapers.com/wallpapers/vector/blue-polygon-28641-1920x1080.jpg);}.jumbotron{width:100%;height:100%}
</style>
</head>
<body>
<div class='container'>
<div class='jumbotron'>Hell</div>
</div>
</body>
</html>
I had this working in IE9, but then messed it up trying to figure it out in IE8 and 7. I've searched around here and other places, but can not find the correct solution to my problem.
I'm trying to scale an image down in a div whenever the browser window is resized smaller than its max-width (fluid image). I'm assuming the problem is that I'm using a CSS3 property (background-size: 100%;) which is not supported in older browsers. How can I make this compatible to IE9, 8, 7?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fluid Image</title>
<style type="text/css">
img {
max-width: 90%;
height: auto;
}
.imageContainer {
width: 900px;
max-width: 90%;
margin: 0 auto;
background-image: url(img/fluidImage.jpg);
background-position: 0 -450px;
background-repeat: no-repeat;
background-size: 100%;
height: 650px;
}
</style>
</head>
<body>
<div class="imageContainer"></div>
</body>
</html>
There's a filter you can use for this:
http://www.pziecina.com/design/turorial_demos/resize_background.php
For pre IE8 use -
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale');
For IE8 use:
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale')";
Using the sizingMethod= 'scale' means that even IE will scale the background image to the size of the browser window.