I am having the most difficult time getting textured background images to show up correctly in HTML5 tags. Specifically, I'm trying to add a .png texture of low-opacity watercolor daubs to a tag that already has a cross-browser gradient applied to it. I can get the gradient to show up fine, but can't get the background image to show up correctly.
I've been told that the CSS command for it is shorthanded:
background:url("filepath");
Is it a matter of the type of quotes I'm using? Does it matter if it's single / double quotes? Or no quotes at all? i'm not sure what the quotes are doing to the selector, or if it's a matter of you can't apply a background image AND a gradient? You can view the space I'm trying to modify at http://www.zeldezine.info/demo/ in the obvious footer position.
Thanks!
You can't add a background image and a gradient to the same element. As for quotes it doesn't matter whether they are single, double or none at all. Just make sure the image path is correct.
If you want both, you can do something like this:
http://jsfiddle.net/vjEh7/
CSS:
footer {
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
div {
width: 150px;
height: 160px;
background: url(http://www.zeldezine.info/demo/img/logo_bottom.png) no-repeat;
}
HTML:
<footer>
<div></div>
</footer>
Try this:
body
{
background-image:url('images/image.jpg');
background-repeat:repeat;
}
Related
I'd like to insert a picture to separate the 'limits' of the progress bar.
Hence the right side would be red, than I'd have my little picture, followed by a green side
Is it possible?
Client side it is all just html, css and javascript. A css linear gradient already works great (boundaries at 10 and 90 percent)
.ui-progressbar {
background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 );
}
And if you want to combine it with an image, see
How do I combine a background-image and CSS3 gradient on the same element?
I'm new to WordPress. We have bought one of the themes and I have being trying to add a gradient to our footer. The theme provides a custom CSS option, but when I add this code to custom CSS and save it I don't see any changes.
This is the code I added to my footer:
.footer {
background: #87e0fd;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZTBmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iIzNmOTNiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTJlM2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #87e0fd 0%, #3f93b5 38%, #012e3a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(38%,#3f93b5), color-stop(100%,#012e3a));
background: -webkit-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -o-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -ms-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: linear-gradient(to bottom, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#012e3a',GradientType=0 );
}
It's a little hard to give you an accurate answer based on such limited information, but I will try nonetheless.
Your CSS is valid. I've thrown together a quick test, and it seems to be working in both Firefox as well as Chrome. So you're good there.
The most common problems and their solutions:
Mixing up ID's and Classes: You are using the class 'footer', indicated in CSS by the dot at the beginning. Chances are the footer is using an ID, which is written with a hash. You can change the selector to #footer.
The footer is empty: If an element in HTML is empty, it causes the element to be zero pixels in height, which effectively makes it invisible. Add and adapt the following to the second line of your CSS: height: 256px;
I have a div and background color is red. Now I'd like to make left 80% remain red, rest 20% on the right part to no color or transparent. Is it possible to alter css only without adding more divs or changing the padding of the div? I'd like div to remain it's original size.
.myClass
{
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 20%, rgba(255,48,48,1) 21%, rgba(255,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(20%,rgba(41,137,216,0)), color-stop(21%,rgba(255,48,48,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* W3C */
}
result:
i don't think you can set multiple background colors for one div, but you could try:
div.twocolorish {
background-color: blue;
border-left: 20px solid green;
}
This would only work if you didn't need text (or other) to go over the part with the green border
You cannot use padding to achieve the partial coloring. A div can be colored in the background which makes the whole div to be colored with the given color. But you can use an outer div to achieve your desired result or use css3pie to achieve your desired result (especially in IE 8 and below). It has gradient options also.
<div style="width:500px; height:400px; ">
<div style="width:80%; height:100%; background-color:blue;">
</div>
</div>
The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
(index):6770 crbug/1173575, non-JS module files deprecated.
(anonymous) # (index):6770
(index):6770 crbug/1173575, non-JS module files deprecated
I'm getting my feet wet with CSS3 and I'm doing my best to convert a Photoshop comp to HTML.
I have multiple instances of a background (using background url) with differing heights and I'd like to apply a gradient on top of that background using rgba gradients (using the alpha channel). I'd obviously like to stay away from a static background image with the gradient built into the pixels.
Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?
I'm guessing if I can't do it in one element, I would put a container inside my background element, float it and make the width and height fill the background element, but that seems pretty messy.
Any advice is appreciated! Thanks for your time!
Here are two examples of the same background and gradient but at different heights: a nav and a footer
The code would look something like this:
<nav>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</nav>
style:
nav {
background : url('repeating-background-image.png') repeat;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
}
Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?
Yes: CSS3 allows multiple background images, separated by commas.
As gradients behave like images, you can use them in conjunction with background images:
div {
width: 400px;
height: 400px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome10+,Safari5.1+ */
}
http://jsfiddle.net/kReNL/
This doesn't work in IE 8 or earlier, but then neither do CSS gradients. (Although Microsoft's filter property works in IE 8 and earlier, and that does support gradients with alpha transparency - see Can you use rgba colours in gradients produced with Internet Explorer’s filter property?).
http://jsfiddle.net/8gvZM/
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
and make a div above it with the background url on a lower opacity.
Is that what you mean?
Use CSS :before to create an additional (pseudo) element sitting on top of the original element.
The original element would have the image background, and the :after element would have the gradient, with an opacity setting so that the original element shows through it.
div {
width: (whatever size you want to set it to)
height: (ditto)
position:relative;
background:url('mainImage.jpg');
z-index:5;
}
div::before {
content:'';
width: .... (same as main div)
height: .... (same as main div)
position:absolute;
z-index:-3;
display:block;
opacity:0.5;
background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */
}
I've done a jsFiddle for you to demonstrate: see here
Hope that helps.
[EDIT] Changed the details of the answer above slightly in response to OP's comment. Now using :before rather than :after, and using z-index to layer things so that the actual text content is visible on top of both backgrounds.
Does anyone know how I could plot a gradient like in the image below with pure CSS.
It doesn't have to work in IE.
I can get it to work but I can't seem to be able to taper off the gradient on both sides left and right like the image shows.
Any ideas would be grateful. Again this is using straight css to do this.
This website is amazing for doing CSS gradients:
http://www.colorzilla.com/gradient-editor/
You can even import an image or CSS.
An example would be:
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
Why do you need gradient for this? How about drop shadows.
Examples
That is a very complex task. They position one div behind the front one. The one behind is where they create the shadow, then they transform it and position it to achieve that effect. Here is a guide guide to do this technique (has it on one corner, but you can tweak a bit and get that effect)... I am sure there are specific guides to achieve the exact effect you want to out there as well, but they seem to be escaping my search skills for the day.
http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
With pure CSS, you could use radial-gradient.
Suppose that you have a div to emulate that shadow, and it has 300px of width and 100px of height, then, you just could achieve the effect with:
background: radial-gradient(70% 10%,gray 20%, white 60%);
background-position: 0px -54px;
background-size: 100% 110%;
Here is the example --> enter link description here