i got a issue, let say i want to display a background image for a link
| words |
the bars mean the start/end of the link, it doesn`t actually exist
and i want the background image display horizontally, but not start from the bar, and end at the bar,
i want it start 13px away from the left bar and 13px away from the right bar??
i know there is a background-position in css, but can i ask the background-position to specify the 13px for me???
The following code does what you need:
<style>
.biglink {
margin: 0 13px 0 13px;
background: url('background.png') no-repeat center center;
}
</style>
I believe background obeys the padding and margin css styles, so you could set margin-left: 13px; and margin-right: 13px;.
Related
I'm not expert in CSS, so bear with me in advance if my question may seem silly to experts.
I'm trying to find out a way to make the product pages of my website look nicer when printed out.
To this purpose, I'm trying to add a background image which has a logo in the header, a footer and a message in the left side margin.
In order for these background elements to show, I've set the size and margins of the page in the custom.css file of my template (I'm using Joomla CMS). This is the code I used (which correctly does what I meant, that is, making the content appear within the set margins):
#page {
/* set size of printed page */
size:210mm 297mm;
margin-top:25mm;
margin-bottom: 12mm;
margin-right: 3mm;
margin-left: 8mm;
}
Then, in the .css file of the page I added this code:
body {
background-color: white !important;
background-image: url('/images/print/sfondo-pdf_v2.jpg') !important;
background-position: 0px 0px !important;
background-size: 100% auto !important;
background-repeat: repeat-y !important;
background-origin: border-box !important;
background-clip: border-box !important;
background-attachment: scroll !important;
}
The problem is, the background is not contained in the total size of the page (i.e. 210mm 297mm), but it is instead contained within the margins previously set.
I would like to know what I should do in order for only the background to ignore the #page margins.
I hope I have clearly explained my point and thank you all in advance!
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
I'm trying to create a block quote like in the image below:
http://www.norrislakevillas.com/images/block-quote-sample.png
The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.
The element is rendering correctly with the exception of the background image, it just won't show up.
CSS Code:
#block_quote{
float:left;
width:400px;
background:#f7f7f7;
background-image:url(images/quote-top.png) left top no-repeat;
margin:50px 0 100px 53px;
border:1px solid #ccc;
}
#block_quote p{
font:italic 14px segoe ui, arial, sans-serif;
color:#5f5f5f;
line-height:1.4em;
margin:0;
padding:20px 15px 20px 60px;
}
Any ideas why the image isn't rendering?
Thanks
Your image path needs to be relative to the CSS file. Also it's just background, not background-image if your using all the declarations in one line and the order at the end is no-repeat top left.
background: url(images/quote-top.png) no-repeat top left;
background is a "shorthand property" that sets all background properties, including the url of the image. The way you write it, it does not specify an image, only a color.
So don't mix up background and the individual background properties like background-image. It should be either
background:#f7f7f7 url(images/quote-top.png) no-repeat left top;
or
background-color:#f7f7f7;
background-image:url(images/quote-top.png);
background-repeat:no-repeat;
background-position:left top;
but not any mix of these; that will confuse the browser.
I have a background image, that is simply a wrapper for the main content of my page.
I have set this image a background image like:
#background {
background: url("../image/bg.png") repeat-y 133px 50px;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
I would have thought that this would position the image 133px from the left and 50px from the top, but it is flush against the top of the browser.
Can anyone shed any light on why this is doing this?
Thanks
Can this kind of position be done when the image has repeat-y?
Thanks
You are using repeat-y so the background is repeated vertically, both down and up. The value you specified - 50px - is the place where the original background starts, but if your background has a height of 50px, you will not notice the difference as it is repeated above it as well.
Is there a way to precisely position a background image with CSS? Code:
.content h2.productSpotlight {background:url(/images/spotlight.jpg) no-repeat; padding-left: 35px;}
I want to be able to move the image around so its more flush with the H2
Thanks
Yes, you can give an offset position for the background property, for example:
background: url(/images/spotlight.jpg) no-repeat 10px 5px;
This will shift the background image 10px from the left corner and 5px from the top. You can also use negative values to shift in the opposite direction.
sure, the background properties include background-position. You can specify it separately as
background-position:20px 20px;
or as part of the combined syntax like
background:url(/images/spotlight.jpg) no-repeat 20px 20px;
See the reference at MDC.