In CSS declaration for a selector is given as:
background-attachment: scroll;
background-color: transparent;
background-image: url(/images/ucc/green/btn-part2.gif);
background-repeat: no-repeat;
background-position: right top;
I want to optimize the code and change it to:
background: scroll transparent url(/images/ucc/green/btn-part2.gif) no-repeat right top;
My question is, Is this correct way and does it work in IE7/8, Firefox, Safari?
Yes it works. Take a look at point 6 here - http://www.domedia.org/oveklykken/css-shorthands.php
http://www.w3schools.com/css/css_background.asp
When using the shorthand property the
order of the property values are:
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll right top;
}
Yes, this is the correct way and it works in all major browsers. You can read more about the CSS background property which can be used to set all background-* properties together.
Update: Yes, the following rule will work:
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Except the browser will attempt to apply this rule to an <background> element in the DOM. And since there's no such element in HTML, the rule will never be applied to anything. :-) So you have to change the rule selector to select the container element you want to apply the background property to:
div#myDivIWantToSetBackgroundTo
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Btw, you can play with various values for the background property on the W3School site.
Related
I have to do the following:
The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.
{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;
Note: the first 225px, which the image fills, should be without the background-color
As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.
The CSS would be:
.imgbg {
width:255px;
height:355px;
background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
background-position: 0px 0px, 0px 112px;
background-repeat: no-repeat, no-repeat;
background-size: 255px 112px, 255px 233px;
}
Here is your updated fiddle
Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.
Check out this fiddle and tell me if this is what you want.
FIDDLE
HTML
<div class="imgbg"></div>
CSS
.imgbg {
width:255px;
height:355px;
background:#f7d8e8 url('http://placehold.it/255x255') no-repeat;
}
I would do the following:
#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }
This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.
When I apply a CSS background to my div tag, the color will work but the background-image will not display.
I want the background-image to be repeated across the bottom of my divs, but even if I only apply background-image: url('assets/shadow.png'); without position, repeat, or background-color, it will still not show up. Only white is displayed.
But if I apply background-color: #ECECFB; the background-color WILL show up correctly in the background.
Why doesn't background-image work?
CSS
#slider-container,#footer-container,#main aside {
background-color: #ECECFB;
background-image: url('assets/shadow.png');
background-repeat: repeat-x;
background-position: bottom;
}
The image is linked correctly. Image is 15px by 12px.
I tried shorthand CSS background and only color was displayed.
Look at my fiddle below, notice it works fine. If the image does not download (i.e. bad url) then the background colour will only appear. Check the location or the network tab on chrome dev tools to see if the background image is not being loaded (404).
<div class="foo"></div>
.foo {
background-color: red;
background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
background-repeat: repeat-x;
background-position: bottom;
height: 500px;
width: 500px;
}
http://jsfiddle.net/rlemon/XCbK4/
The background property also can be used to display images.
Syntax
background: color position size repeat origin clip attachment image;
When using background and background-image at the same time you may have a conflict. I assume using background-color is behaving different for some reason or it may be significant in which order you use them.
This will of course give you the color instead of the image, too:
#slider-container,#footer-container,#main aside {
background-image: url('assets/shadow.png');
background: #ECECFB; // overwriting the image
}
You can try this. I hope it will help:
#slider-container,#footer-container,#main aside {
background: #ECECFB url('assets/shadow.png') repeat-x bottom
}
I have a problem with setting a background image over my background color: Here is my example so that you can see what I mean: JSFiddle
Now here is the functional CSS part:
#tancan{
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}
As you can see in the JSFiddle, the background image repeats. If I use no-repeat as a property, the image disappears.
Also, I want the background image to float to the right, and should the image be bigger than the containing div, how to I make it fit proportionally? - Like you would make an image tag <img/> fit by using width: 100% and height: 100%?
I don't want to use an HTML image tag, it would be much easier but there are several reasons I do not want to use it.
Try this - http://jsfiddle.net/vmvXA/17/
#tancan {
background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}
and to make the background image not exceed its parent container you can use background-size: contain - http://jsfiddle.net/vmvXA/22/
Here's the fiddle.
background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top;
To make the code shorter, it is possible to specify all the settings in one single property. This is called a 'shorthand property'.
To make all pictures fit inside it's parent add the style property background-size:contain;.
Updated the fiddle.
You can't just add no-repeat to background-image, because background-image is a specific property that only refers to the image itself. If you want to add it all in one declaration, then set background:
background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right;
or keep it all separate, up to you:
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
background-repeat: no-repeat;
background-position:top right;
background-size: contain;
I have an image that looks like this:
Is it possible to extend this image (perhaps inside a div) so that it would look something like this:
Thanks!
You can create a div of the same color using the CSS background-color property (I believe the hex should be ~#999). Then, position the image as a background-image within the div using the background-position: right property.
HTML
<div class="arrow">Home</div>
CSS
#arrow {
background-color: #999;
background-image: url('http://i.stack.imgur.com/QDCz4.png');
background-position: right;
background-repeat: no-repeat;
/* sets div dimensions/text styles */
height: 24px;
color: white;
text-align: center;
line-height: 24px;
float: left;
padding-left: 20px;
padding-right: 30px; /* slightly longer to account for background image /*
}
JS Fiddle: http://jsfiddle.net/fbBsz/14/
Get a vertical slice of the gray part of very top left of the arrow with having width:1px. Take that one px slice image and repeat it on -x.
Here is something you can practice with
Since your image does not have a gradient, you have a better chance of matching the color(s) you want with just using background color.
you can set it as a background to a div
#elem {
display:block;
width:200px;
height:20x;
background: url(/filepath/to/image.gif) right top no-repeat #ccc;
}
Just make sure the background color is the same as the dark grey on the gif
No, this is not possible in CSS. You must set the width of the containing element, set the background image's url and set the x-position to right and set the repeat to no-repeat. Then set the background color to the same as the button's foreground color. If the button foreground is a pattern, you will have to use another image as the background.
No, not with that image at least :-)
Looks like you could make use the "sliding doors" technique – see http://www.alistapart.com/articles/slidingdoors/ for a good article about it
this is my stylesheet:
QLineEdit#SearchBarEditBox {
background: white;
background-image: url(:/images/magnifyingGlass.png);
background-repeat: no-repeat;
background-position: 5px 5px;
}
My Problem: "background-position" only receives "top/bottom/right/left" values. Any attempt to use a numerical absolute value results immediately in a "top center" justification for my image. Going crazy here....
Qt stylesheets don't implement full CSS, you can only use center/top/left/bottom/right for background-position.
See background-position and alignment in the Qt Stylesheet Reference.
Although it's an old question, I would like to answer for those who has the same issue still nowadays.
I solved it using the background-origin property:
The widget's background rectangle, to use in conjunction with background-position and background-image. [...] If this property is not specified, the default is padding.
The complete stylesheet to solve the question issue is:
QLineEdit#SearchBarEditBox{
background-color: #FFFFFF;
border-radius: 12px;
border: 1px solid #DEDEDE;
padding: 4px 4px 4px 10px; /* top - right - bottom - left */
background-image: url(:/icons/search.png);
background-repeat: no-repeat;
background-position: left center;
background-origin: content; /* the left margin of background image will 'obey' the padding-left defined up above (10px) */
}
Just for testing, try to change padding from '10px' to '30px' to see what happens.
UPDATE based on #Soyal7 comment:
Depending on the type of the component you're using, there's one more thing to do in order to prevent text overlaping:
QLineEdit: Use ui->SearchBarEditBox->setTextMargins(20, 0, 0, 0); to add a left text margin;
QPushButton: You can subclass QPushButton and reimplement paintEvent() method, or if you want a simpler workaround, just add some blank spaces before your text.
QLabel: Use indent property like this:
Hope it helps :)