I'm having trouble adding 3 images to a table cell in css and was wondering if anyone could help me to figure out what I'm doing wrong. Here is what I have:
css
.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat, repeat-x, no-repeat;
}
html
<td class="Example">
Example
</td>
When I open the page however, all I get is a cell that says Example with no background image. Any suggestions?
Try
.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat;
}
without the three parameters on background-repeat.
And keep in mind that this is not working on every browser.
I suggest you use the old fashion way to resolve this. Put a link on every picture with the same href.
The only browser projects having this
feature implemented so far are WebKit
and KHTML (Konqueror). This got into
Safari 1.3 though, and works in
OmniWeb 5.5 and up.
Source
Having multiple background images in the same element and the current limitations have been answered here: layering-images-in-css-possible-to-put-2-images-in-same-element and also here: an-i-have-multiple-background-images-using-css
Currently not all browsers support that feature as stated in the answers in the above links.
There is also suggestions to work-arounds, such as using multiple Divs and placing each image into its own div and using z-orders to display divs as required.
Related
This question already has answers here:
Display the image in the center of the page
(3 answers)
Closed 6 years ago.
I would like to place one large png in the center of a web page to show my client. If have tried many codes, but it never aligns to the center.
The image is bigger than the browser. So left and right need to fall off.
The client is only allowed to scroll down, but not left or right.
Can anyone help me with the code, please? thx Seb
Try this:
<img src="your_image.jpg" style="display:block;margin:auto;width:100%;"/>
it sounds like you would like to use a Background Image. If you would like to do this, you could try the following code:
body {
background-image: url("http://dummyimage.com/100x100/000/fff");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
You could just set that in the CSS, and you would then have a fixed background image! Now, if you just want a image centered (sorry, I thought you might want the above), you could try the following code:
img {
margin: auto;
display: block;
}
<img src="http://dummyimage.com/100x100/000/fff">
With the first block of code being in the CSS file, and the second piece of code being in the HTML file.
What the difference between background: no-repeat center center;
and background-size: cover; ?
Both achieve basically the same effect as a background image on my website. No difference as far as I can tell in results.
background: no-repeat centre centre;
is saying place a background image in the element, but only show one instance of it (no-repeat), try looking at thebackground-repeat property to see other options.
The CSS then says place the image in the vertical centre, and horizontal centre of the element. This is related to the background-position property.
It might be worth you trying to reducing the image size to something small 10px x 10px to see the effect of no-repeat, vs repeat-x, repeat-y and repeat.
background-size: declares how big you want the background image to be (this allows dynamic resizing of the image much like height and width in the html img tag), this is a property introduced in CSS3.
By default this is the background-image's default/native resolution. By using the be cover value you are saying scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I have put links on each of the properties so you can see the possible values for each. I recommend you look at all of the background-* attributes on w3schools. Look on the left hand side and they are all listed ;)
Alternatively if you're new to CSS, I would recommend this free course by Udacity which has plenty of video tutorials and guides you through HTML & CSS web development.
I am trying to get my background to behave the same way as http://www.gamestop.com's background but everything I have read and tried doesn't work right.
Here is the CSS I currently have and I feel like it just needs to be tweaked a little to make it respond the way I want it to:
html{
background: url('../images/fbg.png') no-repeat center center fixed;
background-color:#000;
}
It is supposed to be fixed at the top of the page, centered, and all overflow should be hidden on the image to where if you were to zoom out it would simply show more of the image on the sides but remain fixed at the top in the same spot. I also would like to make it so that this background is click-able like a link and haven't been able to find anything about that either..
The site that it is going on is http://www.hackersarchive.com/beta.
Thank you for all of the replies! I figured it out & it was right in front of my face! Thank you for everyone who did answer the question for me as well!
Here is the correct code I was looking for:
html{
background: url('../images/fbg.png') no-repeat center top;
background-color:#000;
}
Simple issue that was more of a hassle than it should have been.
I'm trying to do something which I thought would be really simple..
I want to display a background image at the bottom of each table rows (or cells, whichever works best) but i'm getting some alignment issue.
The image always seems to align to the bottom of the cell content, but ignores any padding.
border-origin:border-box doesn't seem to have any influence on the result either.
Setting the background on the row itself (ie. the tr tag) produces the problem.
The background uses this syntax: background:url('...') bottom left repeat-x;
See the following screenshot of the results - i've added a semi transparent outline of the cell just to show the boundaries. The red dotted line is the background.
Here's a fiddle for it: http://jsfiddle.net/bendog/gvtqwhw0/
(note: the fiddle CDNs to bootstrap, which i'm using for the project)
One would think this should be easy...
The problem occurs on my latest Chrome and Firefox on Mac (but haven't tried other browsers yet)
Use background-position adjust pixels wherever necessary
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIxMHB4Ij4NCgk8bGluZSB4MT0iMSIgeDI9IjMwMCIgeTE9IjEiIHkyPSIxIiBzdHJva2U9IiNlOTRjMWEiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLCA1Ii8+DQo8L3N2Zz4NCg==) repeat-x;
background-position:0% 104%;
}
Working fiddle
http://jsfiddle.net/gvtqwhw0/23/
Oh, well, do I feel a bit stupid!
The extra padding was blank space part of the image itself.
It works fine with a corrected image: http://jsfiddle.net/bendog/gvtqwhw0/24/
Here's the updated image tag (apparently I can't post a link to jsfiddle without copying some code here too)
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMi4yIiB4bWw6c3BhY2U9InByZXNlcnZlIj48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNFOTRDMUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMSw1IiB4MT0iMSIgeTE9IjEiIHgyPSIzMDAiIHkyPSIxIi8+PC9zdmc+) bottom left repeat-x;
}
It became apparent when I used the same effect on a heading tag.
Currently I am trying to give a class a background image and make it repeat vertically.
Im using the following code for the image:
background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;
I have also tried
background-image: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;
But I got nothing from this. The page in question can be seen here: http://ponyterrance.co.uk/gmod-loadingscreen/arkonn.html if you want a better idea of what I mean
Its rather irritating because I used the exact same code on the background of a div on a page I made 4 hours ago. I can't see anything wrong though. I've looked over it for a while now looking for anything being missing but it appears all there. You lot will probably see it straight away but I'm blind as hell.
Also I have tried http linking the file as well as just 'main.png' as its in the same directory.
JSFIDDLE : http://jsfiddle.net/tejashsoni111/U5CLS/
Add background size to the image you are using else reduce the size of the image to the container dimension.
Your div is small and part of image that covers div is white hence not visible. Use colored image or change size of div to see full image.
is the div empty ? if so have you tried putting a non-zero value to width and height?
width: /* != 0 value here */ ;
height: /* != 0 value here */ ;
maybe try moving the repeat as seperatly
background-repeat:repeat-y;
if any more ideas will pop-up into my head i'll update the answer
Use the below style, it will work
#main .content {
background-image: url("http://ponyterrance.co.uk/gmod-loadingscreen/main.png");
background-position: center center;
background-repeat: repeat;
}
try this without height and width,
#main .content {
background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y 0 0;
overflow:hidden;
}