Search code examples
cssdrupal-7

How to avoid Background Image overlapping the Blocks

I have inserted an image in the background in my drupal 7 portal. And the css for it is ...

code :

* {
  box-sizing: border-box;
  text-align: center;
  background-image: 
   url
('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue 
    image.jpg') !important;
 background-color:none;
 }

However, with this my image looks like this -

image-overlap

I don't want my background image to overlap the blocks. I have visited few websites, their background image doesn't overlap every new statement / every new entity. it stays embed to background. Please help.

I want to Achieve this - where the blocks are also visible and there is a background image also.

image to achieve

Solution

  • You need to set the background only to the specific elements you want it on, not everything. For example have a class for your menu items called "navigation" and set the CSS like this:

    .navigation{
     background-image: url('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue 
image.jpg') !important;
}