I have table row class named logo with attributes
.logo
{
background: url("img/logo.png") no-repeat left top !important;
}
Now I do get an image on top left on every row, but what I am trying to accomplish here is to move image out of table row such that half of the image is in `table and half of it outside the table.
I changed the my class to
.logo
{
background: url("img/logo.png") no-repeat -12px top !important;
}
and get half of the image in table row but the part of image outside the table disappears (cant see it).
I have tried using z-index, position properties but nothing works. Can someone guide me in right direction on how i can get required behaviour?
NB: testing it in Firefix 20.0.1
Thanks
I think you can achieve this with this trick: you will never see the background because it don't have space to show... Solution naturally pass to set a padding in the <tr> to make that padding show the background image. But, <tr> only gain padding if you set the display to display:block;.
I finally use this code:
.logo {
background:url(whatever.jpg) no-repeat -12px top;
display:block;
padding-left:12px;
}
Here's a working fiddle.
Hope this helps!
Related
I've been trying to figure out for hours where the border from the sidebar is coming from in this site: http://sökoptimering.se/
Here's a screenshot of what I'm trying to look for: http://imgur.com/VY9QplF
It's this
#entries-area {
background: url(images/content-main-bg.png) repeat-y top right;
}
and
#entries-area-content {
background: url(images/content-area-topbg.jpg) no-repeat top right;
}
you can filter properties by 'background' and just check elements with keybord arrows one-by-one. be careful some of them have duplicated rules - so when you disable one, the second is still showing the image
background you're looking for is set for this elements
#entries-area-content
#entries-area
I have a form with a a select box that has a custom drop down arrow, put in place with the background property in my CSS. Right now it's positioned to the right, but that means it butts up right against the side of my box - is there some way I get get the arrow to "see" the padding to the right of it?
CSS:
select {
background: url(images/contact/downarrow.svg) no-repeat right #f3f3f3;
}
RESULT:
Or you can try to use a <img src="images/contact/downarrow.svg" />
with float: right;
And it will be nicely positioned to the right and will follow the Padding rules at your Tab area.
Good luck.
For others:
if you use something like
background: url(images/contact/downarrow.svg) no-repeat 250px #f3f3f3;
that's going to (sensibly) just stick it 250px over, and when you resize the window it'll eventually be covered over by the shrinking screen size. To prevent this, replace those pixel values with percentages. Eg:
background: url(images/contact/downarrow.svg) no-repeat 96% #f3f3f3;
I am fairly new to code and taking baby steps with an issue I am having: swapping out background images. I made very slight adjustments to the three images that make up the background of the site. One was a main background image (in a bodywrap container) that loaded just fine. The next was a wrapper image with a repeat-y attribute that is no longer taking since the swap - the image shows up, but is just showing up as a single white line, while it is meant to 'fill' the rest of the page. Finally, the footer image is not showing up at all.
I thought that swapping out the current images with ones that were only slightly adjusted in photoshop (all I did was remove drop-shadows and red margins) would be an easy task - my mistake!
I tried adjusting the code and got nowhere, so I've copied the original code. I believe that the problem lies within my CSS:
#wrapper, footer, .pagetop, .copyright {
width:942px;
margin:0 auto;
padding:0px 37px 0px 37px;
overflow:hidden;
clear:both;
}
.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x;
width:1016px;
margin:auto;
overflow:hidden;
}
#wrapper {
background: url(images/wrapper.png) 49% repeat-y;
clear:both;
padding-bottom:25px;
min-height:225px;
}
.footer {
background: url(images/footer.png) no-repeat 51% 0%;
overflow:hidden;
min-height:107px;
font-size:1.2em;
padding-top:17px;
font-family: 'Francois One', sans-serif;
}
Thanks in advance for sharing your expertise!
First thing I see that your background instructions are not consistent. Your no-repeat is before and after your alignment values. I would suggest to try keeping it the same everywhere in your code. when your code gets heavy it can be confusing.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
right means align the image on the x axe to the right and
top means align the image on the y axe to the top
Do you understand that your 49.9% values are telling the background image to start repeating at 49% to the left from the edge of the box you as it to be in.
Also your .bodywrap does not have a height. if you only see a small line, this is because your element is only taking up the space the content inside this element is taking. you might have a space or 1 line of code. hard to say without the HTML.
So you need to give the .bodywrap element a min-height or height equal to your image height. The image you provide AS background to an element, does not define that element's height. The <img> tag and an image background don't work the same. an <img> tag will determine its height on its own but you cannot repeat it like a background.
Here you can see more information on background here: http://www.w3schools.com/css/css_background.asp
It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell. If you set the position: relative (for the row) and set the background-image: none (for the cells) it solves the problem on IE but not on chrome! I can't use background positioning since there are many calls and their size varies. (And the picture is not symmetrical- It's a fade out from one side. Anybody??
Example for the css code :
tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }
The HTML is basic - A multi cell table.
The goal is to have different colors fade into every row, but it could be any non-pattern image.
Ok, I spent ages reading about this, and couldn't find an easy fix for all browsers, but as I see you are using fixed height rows, I've developed my own workaround: http://jsfiddle.net/DR8bM/
Basically, instead of putting the background image on the row, you put it on an absolute-positioned div in the first cell of each row (and expand it to fill the whole row). This is slightly hacky, but may be the only reliable way to achieve what you want.
Add float:left to the row, that should fix it.
tr {float:left;}
Tested in Chrome 54 on Windows 10:
tr {
background-attachment: fixed;
}
Though it seems it's not without bugs - the background image only repeats throughout the viewport at loadtime, which means that the cells that appear when you scroll down doesn't have the background.
I have an image with rounded corners(png transparent on the corners), about 150px wide, and 25px height, so i'm trying to use it, but it doesn't work for me:
<button><span>Click me</span></button>
And the css:
button{
border:0;
background:url(../images/button.png) no-repeat top left;
height:24px;
padding-left:10px;
}
And
button span{
display:block;
background:transparent url(../images/button.png) no-repeat top right;
height:24px;
padding-right:10px;
}
But it doesn't work correctly, the right corner isn't displayed correctly.Any help?
Best Regards,
Using Firebug (use it!) it is clear what is happening. Your right corner shows, but as the the button underneath it continues, you simply don´t see it.
You can solve that using two images, a small one (not so wide, minimum width the padding on the left side) for the left corner and a very wide one for the right corner. That way your buttons don´t overlap and you get the desired effect.
First things first: How is it displayed?
You're using the same background images for both left and right corner. Is that in order? (I realize that technically it could be) Also, you might want to try and switch the two (left/right), as span is not a block element, and that might be causing your problems (much in the same way that you can't, say, set a width to a span, unless you also set it to render as a block)
your span and button elements have the same height (which is smaller than image height by the way). Another observation: why do you need span element at all?
start with the simplest way to do something:
<button>Click me!</button>
button {
border: 1px solid #ff0;
padding: 10px;
display:block;
background:transparent url(../images/button.png) no-repeat top centre;
height:25px;
}
this should display your image. Use border property to debug CSS