Jump to content

Recommended Posts

I have been building a website that I like but it is a little bit 'busy' looking. I have a background image (a picture of bark) with multiple boxes floating on it with the info. For example, I have a boxs for navigation, one for the title, and one eith the article. They are spaced out so you can see the bark background through the cracks. I like this but it distracts from the main information in a way I dont want. How can I suround these boxes with a semi transparent white so that you can only lightly see the image through it. I still want the picture to be clear on the edges just have the 'fog' in the center. i tried putting them in an element that has the opacity set down but that affects all child elements. How can i do this but keep the inside text fully clear?

Share this post


Link to post
Share on other sites

You can use an RGBA background color.

 

If you use RGBA, be sure to also specify an ordinary RGB color for browsers that don't support RGBA, like this:

background-color: #FFF; /* for older browsers */background-color: rgba(255, 255, 255, 0.5);

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...