How to rotate background keeping container fixed?
If I understood your question properly, you only need to apply transform: rotate
on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement { position: relative; overflow: hidden; border: #000000 solid 2px; width: 100px; height: 100px;}#myelement:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; z-index: -1; transform: rotate(30deg); background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;}
<div id="myelement"></div>
CSS background image w/ rotate, repeat and opacity
You can do it like below:
.background { height: 500px; width: 500px; position: relative; z-index:0; display: inline-block; overflow:hidden; /* hide the overflow here not on the pseudo element */ padding: 100px; border: black 3px solid;}
.background::before { content: ""; position: absolute; z-index: -1; /* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */ width: 141%; height:141%; /**/ /* to center*/ left: 50%; top: 50%; /* */ background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg); background-size: 100px 100px; /* size of the image*/ transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */ opacity: 0.5;}
<span class='background'> HElloWorld </span>
How to change background image position and rotation in Flutter
You might want to use both the Transform.translate
and Transform.rotate
to achieve this.
class _WaterIntakeState extends State<WaterIntake>
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: <Widget>[
Container(
color: Colors.white,
),
Transform.translate(
offset: Offset(-100.0, 200.0),
child: Transform.rotate(
angle: pi / 4,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.white.withOpacity(0.5), BlendMode.dstATop),
image: AssetImage("assets/images/drink-water.png"),
fit: BoxFit.fitWidth,
)),
),
),
),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: Text('Water Intake'),
),
body: Container(
// child: const ButtonsWidget(),
),
),
],
),
);
}
}
Ofc you need to play with the offset
.
How do I rotate a image background on a select element?
You need to switch from an image to another , rotation is not avalaible for background-image
example
select{ border: 1px solid #ccc; padding: 5px 35px 5px 5px; width:150px; height: 40px; background-color: #eee; color: black; font-size: 16px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMyA1MTIuMDAzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAzIDUxMi4wMDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNBNEMyRjc7IiBwb2ludHM9IjQzMi43NjQsMjU2LjAwMyA3OS4yNCw0OTkuODEzIDc5LjI0LDI2MC40NDEgNzkuMjQsMTIuMTk0IAkiLz4NCgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRTNFN0YyOyIgcG9pbnRzPSI3OS4yNCw1NC4yMjcgNzkuMjQsNDU3Ljc4IDM3MS44MTEsMjU2LjAwMyAJIi8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzQyOERGRjsiIGQ9Ik03OS4yNCw1MTIuMDAzYy0zLjIzNCwwLjAwMy02LjMzNi0xLjI4MS04LjYyMy0zLjU2N2MtMi4yODctMi4yODctMy41Ny01LjM4OS0zLjU2Ny04LjYyM1YxMi4xOTQNCgkJYy0wLjAwMi00LjUzMiwyLjUxLTguNjksNi41MjItMTAuNzk3YzQuMDEyLTIuMTA3LDguODYyLTEuODE0LDEyLjU5MSwwLjc2MWwzNTMuNTI0LDI0My44MWMzLjI5OSwyLjI3Niw1LjI2OCw2LjAyOCw1LjI2OCwxMC4wMzYNCgkJYzAsNC4wMDgtMS45NjksNy43NTktNS4yNjgsMTAuMDM2TDg2LjE2Miw1MDkuODQ5Qzg0LjEyNiw1MTEuMjUxLDgxLjcxMiw1MTIuMDAzLDc5LjI0LDUxMi4wMDN6IE05MS40MywzNS40MDh2NDQxLjE5DQoJCWwzMTkuODYzLTIyMC41OTVMOTEuNDMsMzUuNDA4eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=) 90% / 12% no-repeat #eee ; }select:focus {background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMyA1MTIuMDAzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAzIDUxMi4wMDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIiA+DQo8ZyBzdHlsZT0idHJhbnNmb3JtOnJvdGF0ZSg5MGRlZyk7dHJhbnNmb3JtLW9yaWdpbjo1MCUgNTAlIj4NCgk8cG9seWdvbiBzdHlsZT0iZmlsbDojQTRDMkY3OyIgcG9pbnRzPSI0MzIuNzY0LDI1Ni4wMDMgNzkuMjQsNDk5LjgxMyA3OS4yNCwyNjAuNDQxIDc5LjI0LDEyLjE5NCAJIi8+DQoJPHBvbHlnb24gc3R5bGU9ImZpbGw6I0UzRTdGMjsiIHBvaW50cz0iNzkuMjQsNTQuMjI3IDc5LjI0LDQ1Ny43OCAzNzEuODExLDI1Ni4wMDMgCSIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiM0MjhERkY7IiBkPSJNNzkuMjQsNTEyLjAwM2MtMy4yMzQsMC4wMDMtNi4zMzYtMS4yODEtOC42MjMtMy41NjdjLTIuMjg3LTIuMjg3LTMuNTctNS4zODktMy41NjctOC42MjNWMTIuMTk0DQoJCWMtMC4wMDItNC41MzIsMi41MS04LjY5LDYuNTIyLTEwLjc5N2M0LjAxMi0yLjEwNyw4Ljg2Mi0xLjgxNCwxMi41OTEsMC43NjFsMzUzLjUyNCwyNDMuODFjMy4yOTksMi4yNzYsNS4yNjgsNi4wMjgsNS4yNjgsMTAuMDM2DQoJCWMwLDQuMDA4LTEuOTY5LDcuNzU5LTUuMjY4LDEwLjAzNkw4Ni4xNjIsNTA5Ljg0OUM4NC4xMjYsNTExLjI1MSw4MS43MTIsNTEyLjAwMyw3OS4yNCw1MTIuMDAzeiBNOTEuNDMsMzUuNDA4djQ0MS4xOQ0KCQlsMzE5Ljg2My0yMjAuNTk1TDkxLjQzLDM1LjQwOHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg==) 90% / 12% no-repeat #eee ;
<select> <optgroup label="Ultra Secret"> <option>007</option> <option selected>MIB</option> <option>u mom Alien</option> <option>no u</option> </optgroup> <optgroup label="Something Important"> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> <option>Item 4</option> <option>Item 5</option> </optgroup>
</select>
CSS: background-image rotate without transform: rotate()
To do that, remove the rotation from the CSS of the .bg
class and increase its height from 170%
to 225%
:
.bg {
background-image: url(http://bagrattam.com/website/images/other/paint.png);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: -50%;
left: -10%;
right: -10%;
height: 225%;
z-index: -1;
transform: rotate(0deg);
}
Then use the :after
pseudo class to add a rotated overlay over the image which adds the skew effect:
.bg:after {
content: "";
font-size: 200px;
background: #ffffff;
display: block;
position: absolute;
height: 500px;
left: 0;
right: 0;
bottom: -350px;
transform: rotate(-8deg);
}
Here's what it looks like now:
Hope this helps :)
How do I make the background image to fill the white spaces (on div) while rotating the image CSS or Javascript?
You can try like below:
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width:141vmax;
height:141vmax;
background-size: 200px;
background-image: url(https://as1.ftcdn.net/jpg/00/87/77/88/1000_F_87778829_SUQcfXnnxAvOJDMZBApGuDCh75lb7mIP.jpg);
transform: rotate(45deg) translateY(-50%);
transform-origin:top left;
}
Related Topics
What Does "I" Mean in a CSS Attribute Selector
Should I Use Single or Double Colon Notation For Pseudo-Elements
Ie7 Z-Index Issue - Context Menu
How to Have Css3 Animation to Loop Forever
How to Horizontally Align My Divs
"Text-Decoration" and the ":After" Pseudo-Element, Revisited
How to Rotate the Background Image in the Container
How to Make CSS Visible Only For Opera
Can CSS Force a Line Break After Each Word in an Element
Css Transition Shorthand With Multiple Properties
Set Flexbox Children to Have Different Heights to Use Up Available Space