Some strange behavior about background image
HTML
<body>
<div id="divGaLL">
<ul id="ulGaLL">
<li>...</li>
<li>...</li>
</ul>
</div>
</body>
CSS
body{
background:url(img/back01.jpg); //works
}
#divGaLL{
background:red; // works
background:url(img/back01.jpg); //doesn't work
}
#ulGaLL{
background:url(img/back01.jpg); //works
}
Why I can't set back01.jpg as background for #divGaLL?
That is because you are using the same property and different values. When you are using background: you can write color and image in same line
#divGaLL{
background:url(http://cdn1.iconfinder.com/data/icons/free-scuba-diving-icon-set/128/fish.png) red;
}
DEMO
The background property is a shorthand for setting a bunch of properties, including background-image. If you want to specify the background colour, or a background image, without overriding anything else, you should spell out background-color and background-image in full:
#divGaLL {
background-color: red;
background-image: url(img/back01.jpg);
}
See "background" on MDN.
Try
background:red url(img/back01.jpg) no-repeat;
You need to use
background-image: url('img/back01.jpg');
or e.g.
background: red url('img/back01.jpg') left top no-repeat;
Try to stick with this order of the "arguments" if possible ;)
I prefer to use the second way, however sometimes when you just need to change one thing it is better to use only the first approach.
It's always a good practice to define height and width and redeclare that this element is a block and not an inline style etc. if possible to prevent unwanted behaviour so use something like:
display: block;
width: 150px;
height: 150px;
background: red url('img/back01.jpg') left top no-repeat;
if #ulGaLL has a background image which completely covers it then you wouldn't see the background of #divGaLL.
Solution:
#divGaLL{
width:200px; /* Width of back01.jpg */
height:200px; /* Height of back01.jpg */
background-image:url('img/back01.jpg');
}
If you put the image in your HTML, u can use something like this:
#divGaLL img{ background-color:red;}
It will take only the IMG instead of the whole div.
And yes, do not only use background for a deffinition, since background is used for all kind of different things then only img or color.
So always use background-color, background-image or whatever you want with it
Related
I'm trying to use inline CSS to style an image sprite. So obviously, I need background-position to work, but it's not. I'm not sure what's wrong. It's supposed to be a clickable image that links to another page of the site, but the CSS isn't working.
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style=background-image: "-20px;"></div>;
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style="background-image:-20px;"></div>
I think you had some quote marks mixed up there...
Looks like you're trying to apply the background-position property to an image tag, which won't work. Background properties won't apply to image tags. For your specific use case, you could apply a background image to your anchor tag without needing an image element - like so:
<div class="homepage">
</div>
.image-button {
display: inline-block;
width: 55px;
height: 55px;
background: url('http://3.bp.blogspot.com/-q0CJBWRLWUs/T_z2_c7TunI/AAAAAAAABPk/rS7fmE1P-B4/s1600/megaman7.png') no-repeat 0px 0px;
}
.image-button:hover {
background-position: -55px 0px;
}
View this in action here: http://codepen.io/anon/pen/PqKMLo
I was facing the same issue and I got it done by writing !important.No rule was overridden but css was not applying the position without making it important, seems like a bug.
<div class="ProposalBanner" style="background:url(...\imgs\BannerPRop.jpg) no-repeat center -31px !important"></div>
I am currently having an issue with background color and background images. The project i am working on must use both a color and a background image. For example the image will fill up half of a div and the color will fill up the other half.
Now normally to do this i would use the following piece of CSS:
background: blue url('img.png) right no-repeat;
and this works perfectly but on this project in particular the user can set the background image themselves using a CMS system. So to apply the background images i am using an inline style on each of the divs then the div has its own color in an external stylesheet like so.
stylesheet.css
.bg-color {
background: blue;
}
index.html
<div class="bg-color" style="background:url('img.png') right no-repeat;">
</div>
Now when doing this the background image overrides everything, is there a way for me to achieve the results i am looking for dynamically?
Thanks
the default value of the background shorthand you have on style= is transparent and that is overwriting the color you give in the class bg-color. try:
.bg-color {
background-color: blue !important;
}
In your CSS try using:
.bg-color {
background-color: blue;
}
instead of only background: blue;.
Here is a solution
You may use shorthand notation to incorporate both backgrounds.
<div style="background: url(http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg) no-repeat, green;
background-size: 50%;"></div>
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
I've set background-image on a couple of span elements, but they aren't showing up, I think because my height and width settings are being ignored.
HTML source:
<div class="textwidget">
<span id="starthere" class="sidebar-poster"></span>
<span id="#primarydocs" class="sidebar-poster"></span>
<span id="donate" class="sidebar-poster"></span>
</div>
CSS:
span.sidebar-poster {
margin-bottom: 10px;
background-repeat: no-repeat;
width: 160px;
}
span#starthere {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#starthere:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#primarydocs {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#primarydocs:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#donate {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
height: 285px;
}
span#donate:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}
None of the background images are actually visible.
In Chrome Developer Tools, Under Computed Style, these two spans do appear to have a background image. If I copy and paste the URL of this image, I see the image. Yet nothing is actually rendering.
[UPDATE - this part is solved, thanks] In Chrome Developer Tools, under Matched Rules, only the #starthere and #donate spans are actually picking up the background-image attribute. The #primarydocs span is not. Why not?
SPAN is an inline element. Which will indeed ignore such things. Try setting the display mode in your CSS to something like: display: block;
I think your spans need to have display:inline-block, an ordinary span will always have its 'natural' width and height.
Since a is display: inline; automatically it cannot take width and height attributes from CSS.
If you want to use the inline characteristic but without inner content (ie: <span>content</span>) and instead have a background image, use padding instead.
ie:
span {
padding: 10px;
}
but input the number of pixels you would need to show the image.
Solved it - you can't set height and width on span because it is an inline element. Switching to div solved it.
Phew.
If anyone knows how to debug CSS with better tools than guesswork, hope, Google searches and swearing, please let me know!
I want to create an html page with a watermark. I set the background-image on the body. However I have some elements that are not allowing the background image to bleed through. They define their own background-color (but not background-image), overriding the color in the body. This surprised me. They didn't override the image, just the color.
It seems reasonable to have a visible watermark on a page with elements having different background colors.
How do I get the effect I want using standard html/css?
Here's some sample code that shows the problem. Note the white block obscuring my watermark image.
<html>
<head>
<style type="text/css">
.everything
{
background: url(/images/shield-25.png) blue no-repeat center;
}
table, div{ width: 100% }
#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">
<table id="table1"><tr><td>Top</td></tr></table>
<!-- This table put a big white line over my watermark image. -->
<table id="table2"><tr><td>Middle</td></tr></table>
<table id="table3"><tr><td>Bottom</td></tr></table>
<div id="div1"><tr><td>Top</td></tr></div>
<!-- Thought maybe it was a table thing but nope, divs do it too. -->
<div id="div2"><tr><td>Middle</td></tr></div>
<div id="div3"><tr><td>Bottom</td></tr></div>
</body>
</html>
Unfortunately for you, this is the intended behavior. background-image and background-color are sub-properties of the background property. Since you defined a background on #table2 and #div2, you can't see "through" them to the page background anymore.
CSS3 allows you to set the opacity of the background using the rgba() expression, but IE doesn't support this (Firefox 3 and Safari/Webkit do). To get an rgba()-like effect in IE, you can use a filter: rule such as the following:
#table2 {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}
Note how the startColorstr and endColorstr parameters have a fourth value for alpha.
There is no way to accomplish what you want to do without some clever HTML/CSS hacks. If you set the background color of an element it's not going to allow images underneath it to "bleed through".
You can look into setting the CSS opacity here: http://www.quirksmode.org/css/opacity.html
However, I believe (not tested) that this would apply to any text inside the elements as well so you would likely need a second class to set the opacity back to 1 for the text inside the table, etc.
You're setting the background-image for the body element. The divs and the table are not transparent, and they are in front of the body element, that's why they cover your watermark.
If you want to apply the watermark to each element individually, you should do something like this:
#table1, #table2, #table3, #div1, #div2, #div3 {
background: url(/images/shield-25.png) blue no-repeat center;
}
or maybe
table, div {
background: url(/images/shield-25.png) blue no-repeat center;
}