I wonder if there is a possibility to rotate an image within background-blend-mode.
I want to rotate my second image:
GLRlogo_RGB.png. I've tried it to transform, translate but it doesn't seem to work that way.
Can anyone help me with a solution?
Thanks!
Here my code
#main-image-3{
background-image: url(../img/layout-picture4.jpg), url(../img/GLRlogo_RGB.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover, calc(15rem + 10vw);
margin: 0 0 73rem 0;
transform: rotate(0,0,45deg);
}
#main-image-1, #main-image-2, #main-image-3{
background-color: rgba(9, 231, 9, 0.301);
background-blend-mode: screen, multiply;
}
The only way I know to do that is by seting your background property to a pseudo element ::before or ::after then apply the rotation to it and hide what is overlapping with overflow:hidden like so
.back-rotate {
width:500px; /*it's important to have a size for the relative size of the ::before pseudo element*/
height:200px;
position:relative; /*also important, but if you don't use it, then set the ::before to 'relative' instead of 'absolute' and .back-rotate to 'static' */
overflow:hidden;
}
.back-rotate::before {
content:'';
position:absolute;
/*positioning my background relatively to the main container*/
width:200%;
height:200%;
top:-50%;
left:-50%;
/*layer position 0 so he get behind what the div contains (text etc) */
z-index:0;
/*the rotation*/
background-size:cover;
background-position:center center;
transform:rotate(45deg);
}
/* my background image */
.back-rotate::before {
background-image:url('https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg');
<div class='back-rotate'></div>
Related
I have a div and I would like half of the div to be covered in a gradient and the other half to be a normal image but with the same effect as background-size:cover; and have it fill up the remaining space to the right of the gradient. Is this possible?
div {
width:100%;
height:400px;
background-image:url(http://placehold.it/100x100);
background-size: 50% cover;
background-position: 100% center;
background-repeat:no-repeat;
}
div:before {
content:"";
display:block;
width:50%;
height:100%;
background-image: linear-gradient(red, yellow);
}
<div></div>
Unfortunately this doesn't seem to work. I can use background-size: 50% auto; but that doesn't give me quite what I am looking for. I realize I could just split this into two divs, but I just wanted to see if it was possible to do it with one.
Use multiple background and some padding, background-origin trick. The idea is to define padding as half the width and put the image on the content-box which will be the other half.
You have to use vw unit but there is a small drawback as it consider the width of the scroll. It can also be an issue if the div is not meant to be a full width div.
.box {
padding-left:50vw;
height:300px;
background:
linear-gradient(red, yellow) left/50vw 100%,
url(http://placehold.it/400x400) center/cover content-box;
background-repeat:no-repeat;
}
body {
margin:0;
}
<div class="box"></div>
Or simply use both pseudo element:
.box {
height:300px;
position:relative;
}
div::before,
div::after {
content:"";
position:absolute;
top:0;
bottom:0;
width:50%;
}
div::before {
left:0;
background:linear-gradient(red, yellow);
}
div::after {
right:0;
background:url(http://placehold.it/400x400) center/cover;
}
body {
margin:0;
}
<div class="box"></div>
I am making a menu with 2 items per line and I want them to have a background-image and on hover the image will change to other. I was able to do it in chrome, using content in CSS, but Firefox and IE don't support this. Thus it should be made with background-image. The problem of this is that with content I can specify that the buttons will have 35% of the width and height of the left side while making this with background-image is impossible, I need to say specifically that they will have px of height and that will not make it resize when I resize the window. When I resize the window the left side resizes thus what's inside of it resizes automatically because I defined 35% of it. Here is an example code of how I made it (works in chrome, not in firefox and IE). Can someone help me doing this with background-image and still resize the buttons when I resize the window?
https://jsfiddle.net/37qbtwak/
ul.sidebar-menu li a span {
width:35%;
height:35%;
border:1px solid;
}
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
With background-image I have to do it like this:
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height:100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
Best Regards
That is not a valid use of the content property, which is only intended to be used on pseudo elements.
If you set the display property of your spans to inline-block, you can set a height relative to the width using the padding property. Then set the background-size property to contain and center your image(s).
ul.sidebar-menu{
list-style:none;
margin:0;
padding:0;
}
ul.sidebar-menu li{
margin:0 0 50px;
}
ul.sidebar-menu li.sub-menu{
line-height:15px;
}
ul.sidebar-menu li.sub-menu a{
color:#aeb2b7;
margin-bottom:0 20px 30px 10px;
outline:none;
text-decoration:none;
transition:all .3s ease;
}
ul.sidebar-menu a span {
border:1px solid;
display:inline-block;
padding:0 0 12.25%;
width:35%;
}
#menu_sensor{
background:url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png') center center no-repeat;
background-size:contain;
}
#menu_sensor:hover,#menu_sensor:focus{
background-image:url('http://www.webyposicionamientoseo.com/base/ui/images/blog/27-google-hummingbird.jpg');
color:#fff;
}
<ul class="sidebar-menu" id="nav-accordion">
<li class="sub-menu">
<span id="menu_sensor"></span>
</li>
</ul>
Hello there I am a bit confused by the behaviour on a responsive CSS background image in IE11/Safari 5 which works well in Chrome and Firefox:
#contentheader_logo_inner {
background:url('images/logo.svg') right top no-repeat;
background-size: contain;
display:inline-block;
max-width:200px;
width:100%;
height:100%;
}
The thing is that the svg background image is perfectly contained within the dynamically scaled div (which has a width/height in percent), but in IE and Safari it is always displayed LEFT instead of RIGHT when scaling.
Is there a solution to this?
Your code:
#contentheader_logo_inner {
background:url('images/logo.svg') right top no-repeat;
background-size: contain; /* thats wrong */
display:inline-block;
max-width:200px;
width:100%;
height:100%;
}
Change:
#contentheader_logo_inner {
background:url('images/logo.svg') right top no-repeat;
background-size: 100% 100%; /* full size background */
background-origin: content-box; /* this placing the background the words place (content-box) */
display:inline-block;
max-width:200px;
width:100%;
height:100%;
}
I have a div spanning the whole height of the viewport, while being horizontally center-aligned through use of margins, and would like to center a red square of, say, a 100px by 100px in that div just using CSS. Background-color: red wouldn't work, because that will span the whole div, which will be bigger than 100 pixels. I currently have the following solution:
div {
background-image: linear-gradient(to right, red, red);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
}
It works, because there's no shift in gradient, but using linear-gradient in this way seems sort of hackish, which makes the solution less useable. Is there any way to generate a purely red square of some size smaller than the div without resorting editing the HTML of the page, or resizing the div with CSS? Preferably, I would also like to avoid scaling up an image of 1 red pixel (I wouldn't easily be able to change the colour).
Thanks for reading!
You could use the :after pseudo selector to add a block with these dimensions. If you position it absolute you can center it using left, top and a transform.
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
Or see http://codepen.io/ckuijjer/pen/CbduL
try this
html
<body>
<div id="div0">
<div id="div1"></hr>
</div>
</body>
css
#div1 {
width:100px;
height:100px;
background-color:red;
top: 50%;
transform: translateY(50%);
margin-right:auto;
margin-left:auto;
}
#div0{
height:500px;
width:100%;
background:white;
}
I was wondering maybe there is any way I can do this with CSS.
I have the parent div, and child one. The child is always going to have a background-color, and I want to switch additional class in data loading case. So when data is loading, parent div will have the background image and color (probably rgba with transparency).
The reason I want to do this with parent is I don't know the exact number of childen, or resulting height, so loading overlay div seems not to be a good idea...
http://jsfiddle.net/3Xpnx/15/ here is fiddle, where it can be seen that child's background is over parents
.parent{
background: url('http://www.securenet.com/sites/default/files/spinner.gif') no-repeat scroll 0% 0% / contain #FFF;
z-index:10000;
position:relative;
}
.child{
width:300px;
height:300px;
background-color: rgba(0,250,250,.7);
}
You can do this with a pseudo element which would have to be removed once the loading has finished (but that's another issue). Here I used a hover to show it on and off.
JSfiddle Demo
HTML
some content
CSS
.parent {
position: relative;
}
.parent:after {
position: absolute;
content:"";
top:0;
left:0;
bottom:0;
right:0;
background: url('http://www.securenet.com/sites/default/files/spinner.gif') no-repeat scroll 0% 0% / contain #FFF;
}
/* temp hover state for demo purposes*/
.parent:hover:after {
display:none;
}
.child {
width:300px;
height:300px;
background-color: rgba(0, 250, 250, .7);
}