I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
Related
I really don't know how to name my problem but I have a psd file that looks something like this:
Every item in the image above is a single image like this one:
I don't have a good specification about this, that's all I know about it. So I have been thinking maybe I can use the whole image as sprite background.
Please share your thoughts how to achieve something like this and if you are familiar please edit the question name precisely cause I could not.
Thanks
Here is an great article which accomplishes this using text-shadow: 7 Great CSS based text effects using the text-shadow property
Here is an example how it looks: Hello World example
Code:
h1 {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #9c8468;
opacity: 0.3;
font: 80px 'Museo700';
}
I didn't include the right font, but you get the idea.
This is what you do... I just did this in Photoshop, and the results are pretty good. It can be duplicated in CSS.
<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>
Each of those images should be a different color. Front, as it is. Middle, dark gray, and back, white.
Use CSS is place them in the same spot, but offset by a couple of pixels.
#front {
top:5px;
left:5px
}
#middle {
top:3px;
left:5px
}
#bottom {
top:7px;
left:5px
}
CSS now has filters. (not yet fully supported)
view example
view notation
You can use drop-shadow
box-shadow even with transparent .svgs kept the retangular shadow.
works like text-shadow but for vector images (.svg)
side note: Since it's not yet fully supported, use an image editing software.
I'm trying to use inline CSS to style an image sprite. So obviously, I need background-position to work, but it's not. I'm not sure what's wrong. It's supposed to be a clickable image that links to another page of the site, but the CSS isn't working.
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style=background-image: "-20px;"></div>;
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style="background-image:-20px;"></div>
I think you had some quote marks mixed up there...
Looks like you're trying to apply the background-position property to an image tag, which won't work. Background properties won't apply to image tags. For your specific use case, you could apply a background image to your anchor tag without needing an image element - like so:
<div class="homepage">
</div>
.image-button {
display: inline-block;
width: 55px;
height: 55px;
background: url('http://3.bp.blogspot.com/-q0CJBWRLWUs/T_z2_c7TunI/AAAAAAAABPk/rS7fmE1P-B4/s1600/megaman7.png') no-repeat 0px 0px;
}
.image-button:hover {
background-position: -55px 0px;
}
View this in action here: http://codepen.io/anon/pen/PqKMLo
I was facing the same issue and I got it done by writing !important.No rule was overridden but css was not applying the position without making it important, seems like a bug.
<div class="ProposalBanner" style="background:url(...\imgs\BannerPRop.jpg) no-repeat center -31px !important"></div>
I added the logo for my site in the html before like this:
and that looks great. But now i want different css-files to load different logos.
.companylogo {
background-image: url("/Images/Logo.png");
width: 166px;
height: 14px;
border: none;
}
but when i do this i get a little border around the images.
How do i get that little boarder to disappear?
THis might not be the best jsfiddle https://jsfiddle.net/bewsbews/z9kf21fp/ but as you can see the two first images have a little border around them and they were both made with css and the big burgerking logo is made in the html and that doesn't have a border around it.
A live demo would be better, i think somewhere in your css is the problem, the code above seems okay.
put this in the top of css file
img, a {border:0, outline: none;}
Ok so it is pretty unnecessary to use an img tag when i don't use the src propertie of the image tag. So i changed it to a div and that solved the problem. Obviously there is no need to have a background-image of an img-tag.
Some strange behavior about background image
HTML
<body>
<div id="divGaLL">
<ul id="ulGaLL">
<li>...</li>
<li>...</li>
</ul>
</div>
</body>
CSS
body{
background:url(img/back01.jpg); //works
}
#divGaLL{
background:red; // works
background:url(img/back01.jpg); //doesn't work
}
#ulGaLL{
background:url(img/back01.jpg); //works
}
Why I can't set back01.jpg as background for #divGaLL?
That is because you are using the same property and different values. When you are using background: you can write color and image in same line
#divGaLL{
background:url(http://cdn1.iconfinder.com/data/icons/free-scuba-diving-icon-set/128/fish.png) red;
}
DEMO
The background property is a shorthand for setting a bunch of properties, including background-image. If you want to specify the background colour, or a background image, without overriding anything else, you should spell out background-color and background-image in full:
#divGaLL {
background-color: red;
background-image: url(img/back01.jpg);
}
See "background" on MDN.
Try
background:red url(img/back01.jpg) no-repeat;
You need to use
background-image: url('img/back01.jpg');
or e.g.
background: red url('img/back01.jpg') left top no-repeat;
Try to stick with this order of the "arguments" if possible ;)
I prefer to use the second way, however sometimes when you just need to change one thing it is better to use only the first approach.
It's always a good practice to define height and width and redeclare that this element is a block and not an inline style etc. if possible to prevent unwanted behaviour so use something like:
display: block;
width: 150px;
height: 150px;
background: red url('img/back01.jpg') left top no-repeat;
if #ulGaLL has a background image which completely covers it then you wouldn't see the background of #divGaLL.
Solution:
#divGaLL{
width:200px; /* Width of back01.jpg */
height:200px; /* Height of back01.jpg */
background-image:url('img/back01.jpg');
}
If you put the image in your HTML, u can use something like this:
#divGaLL img{ background-color:red;}
It will take only the IMG instead of the whole div.
And yes, do not only use background for a deffinition, since background is used for all kind of different things then only img or color.
So always use background-color, background-image or whatever you want with it
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.