I need to create div which include background image, and I've tried many ways, but none of these is working.
.tiket{
background: url('ticket.png');
background-image: image-url('ticket.png');
background-image: asset-url("ticket.png", image);
background-image: asset-data-url("ticket.png");
}
But if I open the chrome develop debugger, it will show picture like this
Here is github, if you need more information, please tell me.
Update
Here is jsfiddle
This should be a comment, but I'm too new to do so; sorry. The .ticket div can still have a height of zero if all of its children are floated or otherwise taken out of flow. If you inspect the .ticket div, what width/height are given?
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I got an Image which is 400px x 685px. In the website, i set it will only show 200px x 685px. I want to know how to show the whole image when the mouse hover the image and show another half of the image 200px x 685px to 400px x 685px? Thank you
So I think a part of your css may looks like:
.your-class {
background: url("[the path of your image]");
background-size: 200px 685px;
}
then for when the mouse hover the image:
.your-class:hover {
background-size: 400px 685px;
}
Note that if you're using the <img> tag itself in your .html file, then you should write width and height instead of background-size. Anyway The code above is somehow what developers do in css in this case. But obviously it really depends on how you've structured your HTML with div tags and also the classes you've given to these tags.
you achieve by set
.selector:hover
{
background-size: 100% 100%;
}
I think an acceptable solution would be to create a div in your html. In your style sheet (aka - css file) you should define it with width:200px, height:685px; the next thing you want to do is to set all divs tags (or any id you give this fella) a background-image:url("whatever.png");
Now, you should also use the background-position:right (or left, your choice).
whta will happen so far? Your div will show half an image.
Now you should use div:hover as a new set of rules in your css, and there also use the background-position:left/right (the one you didnt use).
Tell me if it works.
I would like to have two background images for a fansite layout I made: one background should be repeated both horizontally and vertically, the other one only vertically and needs to have a specific position. I made some search on StackOverflow and I added the following to my CSS:
body {background: url(images/bg.png) 162px repeat-y, url(images/bg-all.png) top repeat;}
Clearly I'm doing something wrong though, because the only image showing up it's the second one, the bg-all.png file. I'd need the bg.png to be over bg-all.png because it's the content background.
In order to make things clear, even though it's far from being finished (in fact, there are several other issues but I think it's better to solve one problem at a time), I'm adding a link to the test version of the layout: http://gwyneth-paltrow.org/test/
I don't know if it matters, but it's a Wordpress site.
I'm definitively not an expert and every suggestion is very much appreciated.
Thank you all in advance!
the second value of the background position is missing, try this and substitute the ??? with a value:
body {
background-image: url(images/bg.png), url(images/bg-all.png);
background-position: 162px ???, top ???;
background-repeat:repeat-y, repeat;
}
also note that the first declared background image is ON TOP of the second one.
http://jsfiddle.net/gB7js/
Screenshot of the issue: here
Webpage in Question: http://cure.org
Offending browser: Internet Explorer 7
You'll notice from the screenshot, or if you view this site in IE7, that the background image is not displaying for the content div (#modal-inner-content). Strangely, the image displays in the other divs where it is used (since it's a sprite, I'm using that same image for #modal-top-border and #modal-btm-border).
In all other browsers it displays properly, and even in IE8. I cannot seem to find what CSS rule (or lack thereof) I may be using that IE7 is choking on.
NOTE: in order to get the modal screen, just click the link at the very top banner of the page that says "login to your CURE account
I had the same problem in IE 7 with a transparent PNG acting as a background inside a <div>. Positioning the background at (0|0) fixed it for me:
background: url("images/bg-header.png") no-repeat 0 0;
I had the same problem, buttons with graphic backgrounds aren't displayed in IE7.
It seems that IE7 has problems with such HTML elements with borders, as setting border-width:0 solved the problem for me.
I just remembered that IE7 has a problem with mixed units in the background position property. so -636px top should be -636px 0
I agree with FutureKode. The background on #modal-inner-content isn't displaying because IE doesn't think the element hasLayout, which sometimes causes problems with other style declarations. To trigger hasLayout, the easiest way I see would be to style that div with width:576px (what Firebug is telling me the width of that div is). I'm assuming the width of that box never changes?
More on hasLayout, and what triggers it: http://www.satzansatz.de/cssd/onhavinglayout.html
Are you using some fix for IE and png images ?
If i remember correctly, most plugins/methods to enable transparency to background images by using the filter css property of IE made the background non-repeatable ..
It could be it ..
Not sure why the image isn't showing up in IE7, but this could be a good intermediate fix. this should add a white background if the image doesn't show up.
Try changing #modal-inner-content from:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) repeat-y -636px 0%;
to:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) #fff repeat-y -636px 0%;
--- Edit - don't use above answer ---
Try wrapping the url in quotes:
background: url("http://cure.org/img/modal-bg-xy.png?jcb=1284407379") repeat-y -636px 0%;
I need to install ie7. My first try would be to add a width to #modal-inner-content
Use the clear-rule:
clear:both;
Hi I have a 1px png file,which I am trying to set as a background image for two divs which are adjacent to each other horizontally.The html and css are as under:-
<div id='one'>hi</div>
<div id='two'>hello</div>
The css is like this
div {
width: 50%;
height: 50%
}
#one, #two {
background-image: url(/images/image.png);
background-repeat: repeat;
}
Now the problem here is in between the two divs a black border automaticaly appears when the image is set. I dont want the two divs to be seen as separate blocks.Please help. Am totally new to css and need help:-)!
I'd be willing to bet that the image you are using has alpha transparency (that is, the image is partially transparent), and what you're seeing is a one-pixel overlap between the two divs. Either make sure that the container is an even number of pixels wide, or put the divs inside another container and use the background on that instead.
like robert, i'm also not getting the border, but i do get some repeats.
see if this works for you:
#one, #two{
background-image:url(99785.jpg);
background-repeat: no-repeat;
borders: 0
}
The problem is caused by a couple of interacting things.
First, make sure you are using the html strict doctype. This will help mitigate a lot of the formatting issues between browsers around divs. See alistapart for a description and list of real doctypes to use and quirksmode for a detailed comparison of them.
Second, you will more than likely have to set the margin of your divs to 0. Browsers have different default settings. A strict doctype will alleviate most of this, but there are usually other areas you have to overcome as well.
Also, you might want to grab firebug for firefox and leverage chromes dev tools. firebug will actually show you what all of the margins / padding / everything else is being set to. The Chrome tools don't give you a pretty picture with the details but you can see what the margins/padding/etc are in the Computed Style section.