Jump to content

Archived

This topic is now archived and is closed to further replies.

jane

Transparent box behind text

Recommended Posts

jane

Hi,

 

I found this code in another thread:

H1.masthead-title {background-color: rgba(202, 151, 43, 0.5)}

.masthead .masthead-tag  {background-color: rgba(202, 151, 43, 0.5)}

 

I want to apply it to my site however I'm having a bit of trouble with styling it so that it is just one rectangle (600px x 200px) behind the masthead title and subtitle (not separated like it is now).

 

Any advice?

Share this post


Link to post
Share on other sites
greenfly

HI @jane 

 

try this 

 

.masthead .inner {
  background:rgba(202, 151, 43, 0.498039);
}
If you want to make it specfifc to just this masthead add the following - #mastheadu1ooelm
 
to make it
 
#mastheadu1ooelm .masthead .inner {
  background:rgba(202, 151, 43, 0.498039);
}

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jane

Thanks Martin Davies for the help. I tried the second code but it didn't do anything unfortunately

Share this post


Link to post
Share on other sites
greenfly

sorry - could you provide a link to your site for us 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly

does this work for you?

 

.masthead {
  background-color:rgba(202, 151, 43, 0.498039);
}

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jane

Yes Martin Davies, that  is definitely closer to the goal! What if I wanted to be able to manipulate the size of this background box?

Share this post


Link to post
Share on other sites
greenfly

change these

 

.masthead {
  margin-bottom:65.1px;
}
 
.masthead .inner {
  padding-top:43.4px;
}
 
Install Firebug from http://getfirebug or use your inspector tools in your browser and inspect the page to see the styles to change http://screencast.com/t/GvkoHKjo5Q
 

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jane

Ah OK! The Screencast is very helpful - thanks Martin Davies!

Share this post


Link to post
Share on other sites
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×