I am having trouble getting background-size: cover; to work from my CSS file when specifying an inline background image via style="" tag:
CSS
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background: #cccccc;
}
HTML
<header class="hero" style="background-image: url('hero.jpeg');"></header>
If I add !important to background-size: cover;, it works properly. Why can I not get this to work without !important?
Try changing background: #cccccc; to background-color: #cccccc;.
As background is a shorthand rule, it will override some the of values you set earlier.
Initial value, as each of the properties of the shorthand:
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent
You are overwritting all your background styles with background: #cccccc; because you are not specifiyng the background attribute, so you should change it by
background-color: #cccccc;
by this way the background color will work as color attribute and won't overwrite the others attributes
Related
I have a #div element with the following CSS styles:
width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
And the result is the following:
As you can see in the left and bottom part of the element there are two blue lines (the color corresponds to the code #53A7E7).
If I delete the style background-size: cover; both lines disappear and the image covers the entire surface of the element.
Any idea how to fix this?
The original image has the dimensions 1779x683 pixels, but I want it to be fixed for any image size.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>
Don't use background-color and background-size: cover at the same time because the image will be on top of the color. If you need a color around your background-size that is cover, just add border. The background-size: cover is working corectly. In your example I suppose you need display: inline-block.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
border: 10px solid #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>
body {
background: #fff url("milkshakeonthewindowsill.jpg") cover no-repeat fixed;
}
That's my CSS for my body, yet, it won't load the image, but somehow,
body {
background-color: #fff;
background-image: url("milkshakeonthewindowsill.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
this code does. What am I missing or doing wrong?
In my experience, size cover has to be added separately:
body {
background: url("milkshakeonthewindowsill.jpg") no-repeat fixed;
background-size: cover;
}
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the other ones are in this order.
background: #fff url("milkshakeonthewindowsill.jpg") cover no-repeat fixed;
You are making use of background-size which isn't supported in the shorthand syntax and it should be in that order to work as given above. So, the correct syntax would be:
background: #fff url("milkshakeonthewindowsill.jpg") no-repeat fixed;
background-size:cover;
Background size cover must be added separately:
body {
background: #fff url("milkshakeonthewindowsill.jpg") no-repeat fixed;
background-size: cover;
}
I wish i never had to ask this but im confused.
So i have a basic background image on my div and for some reason when i set the background-size: 246px 70px; it does not work, only if i use !important it works.
.footer div.image-logo {
height: 70px;
width: 246px;
background-size: 246px 70px;
background-position: center;
background: url(/images/svg/five_Logo.svg) no-repeat;
margin: 20px auto;
}
Now basically you would think other css is overwriting it, well thats my rookie thought but it is not, when i inscpect the div with the background image, and click the tab "computed" to check the current state of the background-image-size it says background-size:auto;, and when i click on this to see where it gets the property auto it shows 246px 70px style.css?ver=1.0.5:2266 .footer div.image-logo which is the css where i set my background size to background-size: 246px 70px;.
I would like to be able to set the background size without using !important
The background shorthand includes background-size:auto and this is overriding your previous background-size statement.
Put the background-size statement after the background shorthand statement.
div {
width: 400px;
height: 300px;
margin: 1em auto;
}
.one {
background-size: 200px 100px;
background: url(http://www.placebacon.net/400/300) no-repeat; /* I win */
}
.two {
background: url(http://www.placebacon.net/400/300) no-repeat;
background-size: 200px 100px; /* I win */
}
<div class="one"></div>
<div class="two"></div>
Syntax is;
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
Ex:
body {
background-image: url(photo.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
background-color: #ccc;
}
Therefore you might want to re-order. (Clear cookies as well)
I have a class that will be used by multiple DOM elements, of course..
I created the class .highlight and to each highlight div, I added an unique id to it.
.highlight {
height: 520px;
width: 100%;
padding: 0;
display: table;
overflow: hidden;
border: none;
}
.highlight#pixel {
background: url('../images/pixel.jpg') no-repeat center;
}
Each ID has it's own background-image via css. I would like to use the css property background: cover; to fill in all space with the image.
I thought it would work if you added the cover property to the div .highlight, because the id is added to the same div and so I don't have to add the cover property every time to each id in the css, but this doesn't work. Any thoughts why this is not working.
I speak about the following:
.highlight {
height: 520px;
width: 100%;
padding: 0;
display: table;
overflow: hidden;
border: none;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlight#pixel {
background: url('../images/pixel.jpg') no-repeat center;
}
Thnx!
background: url('../images/pixel.jpg') no-repeat center;
This is overwriting the background-size rule in the previous, less specific selector .highlight. Instead of using the shorthand in .highlight#<id>, you could use it to set background defaults on all .highlight elements, then be specific when declaring the image, for example:
.highlight {
...
background: no-repeat center / cover;
}
.highlight#pixel {
background-image: url('../images/pixel.jpg');
}
Using the background shorthand CSS will overwrite all background properties you have under .highlight. For your id specific divs, use the full background properties and not the shortand.
.highlight#pixel
{
background-image: url('');
...
}
for example.
in the .CSS File:
when i apply
body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100% 100%;}
the background-image:url('Images/Login_Background.jpg'); works fine
But as soon as i make a id like:
#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}
and when my <section id="login"> uses this css id; the background: url('Images/Login_Background.jpg'); style doesn't works!!!
Am i going wrong somewhere which i am not able to spot? Got tired from this!!!
Replace
#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}
with
#login {
background-image:url(Images/Login_Background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;
}
It Should Work Fine...!!
not sure what is the result you are expecting but you can't see the background in the div
because of the background-repeat: no-repeat; property, here is a demo without it: http://jsfiddle.net/dBRQw/
height of the element, keep in mind that an empty div has the height of 0px (unless you specify a value for it or it has content in it) and in this case you won't be able to see the background, like here: http://jsfiddle.net/dBRQw/1/
and this probably creates the issue, as you also use the background-position: center center; property that sends your 100px sized background to the center of that element
http://jsfiddle.net/dBRQw/2/
I have set the width and height of the div to 900px so you can see the background at the center. To sum it up, your issue might be because your element has no height or has no content in it that makes him as 0px height by default.
hope this helps you.