CODEWITHSUNDEEP
htmlcss
Matt Zelenak
Matt Zelenak

Reputation: 261

Background images for divs

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!

Upvotes: 1

Views: 140

Answers (2)

Key-Six
Key-Six

Reputation: 2469

Try this:

body
{
  background-image:url('images/image.jpg');
  background-repeat:repeat;
}

Upvotes: 0

user967451
user967451

Reputation:

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>

Upvotes: 3

Related Questions