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%;
}
Related
When resizing the browser or testing the responsiveness through devtools, the background image tends to shrink and move towards the left and when it reaches to a width like 600px the image only takes up half of the div, I looked around, and everyone suggest background-size: cover;, but that's not working. What am I doing wrong? How can I make it so that the image always covers the div?
#page-header {
margin: 0 auto;
width: 100%;
height: 700px;
background-image: url(an-image.png);
background-size: cover;
background-repeat: no-repeat;
background-origin: border-box;
display:flex;
align-content: center;
}
Because you are using height:700px and the background-image, your image will not occupy 100% of your width, but 700px of your height.
You have to use the <img/> tag.
For exemple, add to #page-header position:relative; and overflow:hidden;. Then, add an img tag child (with the src attribute) with those properties:
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
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>
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>
I am working on a draft version of my website which uses a more responsive design than the original and have encountered a problem making my CSS rollover effect navbar buttons resize properly. I can get the divs to resize ok but not the .png images themselves.
Below is the code for the "Home" button. I set the div to resize to 11.5% because when it is displayed next to the other buttons they all have unique sizes and fit nicely within the parent div.
Any help much appreciated :) thanks for looking!
#homebut
{
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:auto;
}
#homebut:hover
{
background-position:0 -40px;
background-position:center bottom;
}
#homebut: span
{
position:absolute;
top: -999em;
}
As comments background-size:100% auto;
#homebut {
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:100% auto;
}
Try background-size: cover;.
Cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
I have a #container element, that i have a background issue with:
html {
font-family: Arial, sans-serif;
height:100%;
}
body{
margin: 0 auto;
padding: 0;
font-size: 12px;
height:100%;
background:url(/_images/body-bg.jpg) top center no-repeat;
/*background:#0068b3;
background: -webkit-gradient(linear, left top, left bottom, from(#bfd9ed), to(#0068b3));
background: -moz-linear-gradient(top, #bfd9ed, #0068b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd9ed', endColorstr='#0068b3')*/
}
#container {
width:995px;
margin: 0 auto;
padding: 0;
height:100%;
position:relative;
}
When i add a background image to #container, and the page has content that requires scrolling, the background image only displays the amount of the window height, and when you scroll the background image does not display...
Why would that be?
To the image not scroll with the div, I must set it as fixed:
#container {
background:url('img.png') top left no-repeat;
background-attachment:fixed; //this will avoid scroll
}
In order to make the stretch the image to the size of the div, you can use background-size: 100%;, but this is a css3 property, and will not work in older browsers (IE8-)
If container will have a fixed width, just make a image with same width. Else, you'll have to implement a javascript solution to resize it accordingly.
You have no-repeat on the background CSS property of body.
Change to repeat or repeat-y to only repeat vertically.