• 0
Votes
name
name Punditsdkoslkdosdkoskdo

How to Adding background image to div using css?

I have been trying to add background image to a div class using css. but have no success.

HTML code:-

id="masthead" class="site-header" role="banner">
class="header-shadow">
<!-- .site-navigation .main-navigation -->
<!-- #masthead .site-header -->

CSS:-

.header-shadow{
    background-image: url('../images/header-shade.jpg');
}

Additional information:

This is an image with shadow and i am using it at the top of the website, so it mustn't have a particular width.

name
  • 1
Teacher

You need a add a width and a height of the background image for it to display properly.

For Instance,

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    width:xxpx;
    height:xxpx;
}

As you mentioned that you are using it as a shadow, the you can remove the width and add a background-repeat (either vertically or horizontally if required).

For Instance,

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    background-repeat: repeat-y; /* for vertical repeat */
    background-repeat: repeat-x; /* for horizontal repeat */
    height:xxpx;
}

Hope this helps.

PS: xx is a dummy value, you need to replace it with your actual values of your image.

  • 1
Reply Report