Home/ Questions/Q 7849449
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T18:31:24+00:00

I am having the most difficult time getting textured background images to show up

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0