1 reply [Last post]
syberjj
syberjj's picture
Offline
newbie
Last seen: 7 years 43 weeks ago
Timezone: GMT-5
Joined: 2013-11-26
Posts: 1
Points: 2

I have a basic blogp with a 2 column layout. One for the content (left), anothe column for "latest articles" and other stuff (right). I wish to add a background image, but it is giving me problems.

I was able to do so in 2 ways, but both gave me problems:
- First I tried placing the image as a background to the 2nd column. This worked fine, but made the image get cut off here column 2 "ends"
- Then I added it as a background for the whole page, but now it gets cut off under the "column 2".

What I want is for the image to hide only under column 1 (the content) and in all other cases for it to be visible, but "under the content and boxes of column 2".

The image's URL is "http://web.cim-team.com.br/hs-fs/hub/215943/file-392241045-jpeg/images/blog-design/cabo_3-260x1000.jpeg" (so you can find it below) and it is a Hubspot blog CSS (that's why it has some extra options).

If you visit the blog.cim-team.com.br you will see hwat I mean.

I thank you for your time, I realize this must be a pretty stupid mistake but I just can't find how to fix this.

/* FONT */
@font-face {
font-family:'DroidSansRegular';
src:url("/Portals/215943/fonts/DroidSans-webfont.eot?") format('eot'),
url("/Portals/215943/fonts/DroidSans-webfont.woff") format('woff'),
url("/Portals/215943/fonts/DroidSans-webfont.ttf") format('truetype'),
url("/Portals/215943/fonts/DroidSans-webfont.svg#webfont6rGBoMAO") format('svg');
font-weight:normal;
font-style:normal
}
 
/* WEBSITE BACKGROUND */
html,body {
} 
 
#Form {
}
 
#foxboro_body {
overflow-x: hidden;
width: 100%;
background-image:url('http://web.cim-team.com.br/hs-fs/hub/215943/file-392241045-jpeg/images/blog-design/cabo_3-260x1000.jpeg');
background-repeat:no-repeat;
background-position: top right;
background-attachment: fixed;
}
 
/* CONTAINER */
#foxboro_container {
overflow: visible;
}
 
/* COURTESY LINKS */
#foxboro_courtesy_links {
background: url(/Portals/215943/layout/courtesy-bg.png) repeat-x scroll 0 0 #1F2021!important;
margin-left: -9999px;
margin-right: -9999px;
padding-left: 9999px;
padding-right: 9999px;
padding-bottom: 7px;
}
 
#foxboro_courtesy_links ul {
margin: 0;
padding: 0;
float: left;
}
 
#foxboro_courtesy_links ul li {
display: inline-block;
margin-left: 5px;
padding-left: 10px;
background: url(/Portals/215943/layout/couretsy-border.png) no-repeat scroll 0 50% transparent;
}
 
#foxboro_courtesy_links ul li a:hover {
color: #A0A3A4;
}
 
#foxboro_courtesy_links ul li a span {
font-size: 11px;
line-height: 26px;
}
 
/* HEADER */
#foxboro_header {
margin-left: -9999px;
margin-right: -9999px;
border-bottom: 1px solid #DFDFE0;
background: url(/Portals/215943/layout/header-bg.jpg) no-repeat scroll 50% -530px transparent!important;
padding: 0 9999px 27px;
}
 
#foxboro_header span.logo {
margin-left: -5px;
}
 
/* MENU */
#foxboro_menu {
float: right;
width: auto;
margin-top: -73px;
background-color: transparent!important;
}
 
#foxboro_menu .radmenu {
}
 
#foxboro_menu ul {
}
 
#foxboro_menu ul li {
}
 
#foxboro_menu ul li.first {
}
 
#foxboro_menu ul li.last {
}
 
#foxboro_menu ul li a {
}
 
#foxboro_menu ul li a.selectedtab {
}
 
#foxboro_menu ul li a:hover {
}
 
/* for the parent whose children are visible */
#Body #foxboro_menu ul.rootGroup > li > a.expanded {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 7px 7px 0 0;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
 
#foxboro_menu ul li a span {
}
 
/* for any parent that has children */
#foxboro_menu ul li a span.expandTop {
}
 
/* selecting only the parents */
#foxboro_menu ul.rootGroup {
}
 
#foxboro_menu ul.rootGroup > li {
margin-right: 10px;
}
 
#foxboro_menu ul.rootGroup > li > a {
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
#foxboro_menu ul.rootGroup > li > a span {
font-family: DroidSansRegular,Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 30px;
padding-top: 6px!important;
padding-bottom: 6px!important;
}
 
#foxboro_menu ul.rootGroup > li.last {
margin-right: 0;
}
 
#foxboro_menu ul.rootGroup > li > a.selectedtab {
background: url(/Portals/215943/layout/menu-selected-item.png) no-repeat scroll 50% 100% transparent;
background-size: 70% 10px;
}
 
#Body #foxboro_menu ul.rootGroup > li > a:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
color: #1D110B;
text-shadow: 0 1px 0 #FFFFFF;
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
#Body #foxboro_menu ul.rootGroup > li > a#dnn_INGENIMENU1__ctl0_m4 span {
background: url(/Portals/215943/layout/academic-icon.png) no-repeat scroll 6px 6px transparent;
padding-left: 36px;
}
 
#Body #foxboro_menu ul.rootGroup > li > a.expanded:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 7px 7px 0 0;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
/* SUB MENU */
#foxboro_menu div.slide {
margin-top: -1px;
}
 
#foxboro_menu ul.group {
padding:5px 0px;
background: #fafafa;
border-radius: 0 7px 7px 7px;
box-shadow: 0 3px 3px rgba(0,0,0,0.5),-1px 0 0 #fff inset,1px -1px 0 #fff inset;
text-shadow: 0 1px 0 #fff;
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
#foxboro_menu ul.group li {
float: left!important;
}
 
#foxboro_menu ul.group li.first {
}
 
#foxboro_menu ul.group li.last {
}
 
#foxboro_menu ul.group li a {
margin-left: 5px;
margin-right: 5px;
border: 1px solid transparent;
}
 
#foxboro_menu ul.group li a:hover {
background-color: #F6F7F8;
border-radius: 3px;
border: 1px solid #EAEBEC;
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
#foxboro_menu ul.group li a.selectedtab {
}
 
#foxboro_menu ul.group li a span {
font-weight: normal;
font-size: 14px;
line-height: 15px;
}
 
#foxboro_menu div.slide div.slide {
margin-top: 0;
}
 
#foxboro_menu ul.group ul.group {
margin-left: 0;
border-radius: 7px;
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
#foxboro_menu ul.group ul.group li a {
background: url(/Portals/215943/layout/sub-menu-dots.png) no-repeat scroll 0 3px transparent;
padding-left: 5px;
padding-right: 5px;
}
 
#foxboro_menu ul.group ul.group li a:hover {
background: url(/Portals/215943/layout/sub-menu-dots.png) no-repeat scroll 0 -97px transparent;
}
 
#foxboro_menu ul.group ul.group li a:hover span {
color: #21A8DA;
}
 
/* for the child that has other children */
#foxboro_menu ul.group li a span.expandLeft {
}
 
/* SIDE MENU */
#foxboro_side-menu {
}
 
#foxboro_side-menu .radmenu {
}
 
#foxboro_side-menu ul {
}
 
#foxboro_side-menu ul li {
}
 
#foxboro_side-menu ul li.childitem1 {
}
 
#foxboro_side-menu ul li.selectedtab {
}
 
#foxboro_side-menu ul li.haschildren {
}
 
#foxboro_side-menu ul li.first {
}
 
#foxboro_side-menu ul li.last {
}
 
#foxboro_side-menu ul li a {
}
 
#foxboro_side-menu ul li a:hover {
}
 
#foxboro_side-menu ul li a span {
}
 
#foxboro_side-menu ul li.childitem1.last {
padding-bottom: 0;
}
 
#Body #foxboro_side-menu ul li.childitem1 span {
padding-left: 29px;
margin-left: 0;
}
 
/* CONTENT */
#foxboro_content {
}
 
/* TOP PANE */
#foxboro_top {
overflow: hidden;
}
 
#foxboro_top #dnn_TopPane {
}
 
/* ALL SKINS */
#foxboro_one-column, #foxboro_two-column, #foxboro_two-column-right, #foxboro_three-column, #foxboro_two-eq-column, #foxboro_three-eq-column {
}
 
#foxboro_one-column, #foxboro_two-column, #foxboro_two-column-right, #foxboro_three-column {
overflow: visible;
}
 
#foxboro_two-eq-column, #foxboro_three-eq-column {
padding-top: 20px;
}
 
/* ONE COLUMN SKIN */
#foxboro_one-column {
}
 
/* TWO COLUMN SKIN */
#foxboro_two-column {
}
 
#foxboro_two-column #foxboro_col1 {
width: 27.6%;
}
 
#foxboro_two-column #foxboro_col2 {
width: 72.3%;
}
 
/* TWO COLUMN RIGHT SKIN */
#foxboro_two-column-right {
}
 
#foxboro_two-column-right #foxboro_col2 {
width: 72.3%;
}
 
#foxboro_two-column-right #foxboro_col3 {
width: 27.6%;
}
 
/* THREE COLUMN SKIN */
#foxboro_three-column {
}
 
/* TWO COLUMN EQUAL SKIN */
#foxboro_two-eq-column {
}
 
/* THREE COLUMN EQUAL SKIN */
#foxboro_three-eq-column {
}
 
/* COLUMN 1 - ALL SKINS */
#foxboro_col1 {
}
 
#foxboro_col1 > div.pad {
overflow: visible;
}
 
/* COLUMN 2 - ALL SKINS */
#foxboro_col2 {
}
 
#foxboro_col2 > div.pad {
}
 
#foxboro_col2 div.pad #dnn_ContentPane {
}
 
/* COLUMN 2 - TWO COLUMN RIGHT SKIN */
#foxboro_two-column-right #foxboro_col2 div.pad {
padding-bottom: 35px;
}
 
/* COLUMN 3 - ALL SKINS */
#foxboro_col3 {
}
 
#foxboro_col3 > div.pad {
overflow: visible;
}
 
/* MODULES - COLUMN 1 - ALL SKINS */ 
#Body #foxboro_col1 div.block {
margin-bottom: 20px;
}
 
#Body #foxboro_col1 div.block div.pad {
margin-left: 0;
background: none repeat scroll 0 0 #FCFDFE;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset;
padding: 20px;
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
#foxboro_col1 div.block div.pad > div {
}
 
 
/* MODULES - COLUMN 1 - TWO EQUAL SKINS */ 
#foxboro_two-eq-column #foxboro_col1 div.block div.pad {
margin-right: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
padding-top: 8px;
}
 
/* MODULES - COLUMN 1 - THREE EQUAL SKINS */ 
#foxboro_three-eq-column #foxboro_col1 div.block div.pad {
margin-right: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
padding-top: 8px;
}
 
/* MODULES - COLUMN 2 - ALL SKINS */
#foxboro_col2 {
}
 
#foxboro_col2 div.pad {
}
 
#foxboro_col2 div.pad #dnn_ContentPane {
}
 
/* MODULES - COLUMN 3 - ALL SKINS */ 
#Body #foxboro_col3 div.block {
margin-bottom: 20px;
}
 
#Body #foxboro_col3 div.block div.pad {
margin-right: 0;
background: none repeat scroll 0 0 #FCFDFE;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset;
padding: 20px;
behavior: url(/Portals/215943/scripts/PIE.htc);
position: relative;
}
 
#foxboro_col3 div.block div.pad > div {
}
 
/* MODULES - COLUMN 3 - TWO EQUAL SKINS */ 
#foxboro_two-eq-column #foxboro_col3 div.block div.pad {
margin-right: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
padding-top: 8px;
}
 
/* MODULES - COLUMN 3 - THREE EQUAL SKINS */ 
#foxboro_three-eq-column #foxboro_col3 div.block div.pad {
margin-right: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
padding-top: 8px;
}
 
 
/* ANCHORS */
#foxboro_content a {
text-decoration: none;
}
 
#foxboro_content a:hover {
color: #1D110B;
}
 
/* FIX FOR EDIT/REMOVE/ADD MODULE ANCHORS */
#foxboro_content .CMSConfigureBox a {
}
 
/* HEADINGS */
#foxboro_content div.block h3 {
font-size: 18px;
}
 
#foxboro_col1 h3 {
}
 
/* select the module title for column 1 */
#foxboro_col1 div.block div.pad > h3 {
}
 
#foxboro_col2 h1 {
font-size: 36px;
}
 
/* select the module title for column 2 - logged out */
#foxboro_col2 #dnn_ContentPane > h1 {
}
 
/* select the module title for column 2 - logged in */
#foxboro_col2 .EditModuleWrapper > h1 {
}
 
#foxboro_col2 h2 {
font-size: 24px;
}
 
#foxboro_col2 h3 {
font-size: 16px;
}
 
#foxboro_col2 h4 {
}
 
#foxboro_col2 h5 {
}
 
#foxboro_col2 h6 {
}
 
#foxboro_col3 h3 {
}
 
/* select the module title for column 3 */
#foxboro_col3 div.block div.pad > h3 {
}
 
/* LISTS */
/* unordered lists */
#foxboro_col2 ul,
#foxboro_content div.block ul {
list-style-type: disc;
margin-left: 30px;
}
 
#foxboro_content div.block ul li {
padding-bottom: 0;
}
 
/* ordered lists */
#foxboro_col2 ol {
}
 
/* FONT */
#foxboro_content table td {
}
 
/* FORM SUBMIT BUTTON */
#foxboro_content div.block .FormSubmitButton {
width: auto;
}
 
/* BLOG MODULES */
#bb-container div.post {
font-size: 14px;
}
 
#bb-container div.post h3.title {
}
 
#bb-container div.post h3.title > a {
text-decoration: none!important;
}
 
#bb-container div.post div.byline {
font-size: 11px;
font-style: normal;
line-height: 13px;
color: #999999;
}
 
#bb-container div.post div.byline a {
}
 
/* BOTTOM PANE */
#foxboro_bottom {
overflow: hidden;
}
 
#foxboro_bottom #dnn_BottomPane {
}
 
/* GALLERY MODULE */
#foxboro_content div.block div.albumview.view-thumbnail div.fakecrop-fill a {
}
 
#foxboro_content div.block div.albumview.view-thumbnail div.page_holder a img {
}
 
/* FOOTER */
#Body #foxboro_footer {
overflow: hidden;
/background: url(/Portals/215943/layout/footer-bg.png) repeat-x scroll 0 0 #323334;
margin-left: -9999px;
margin-right: -9999px;
padding: 18px 9999px 38px;
}
 
#foxboro_footer div.clear {
display: none;
}
 
#foxboro_footer #dnn_dnnLINKS_lblLinks {
}
 
#foxboro_footer .SkinObject {
}
 
#foxboro_footer span.SkinObject {
}
 
#foxboro_footer a.SkinObject {
}
 
#foxboro_footer #footerContainer {
}
 
#foxboro_footer #footerContainer > a:first-child {
display: block;
float: right;
height: 27px;
width: 27px;
background: url(/Portals/215943/layout/footer-arrow.png) no-repeat scroll 0 0 transparent;
margin-right: -4px; 
margin-top: -2px;
}
 
#foxboro_footer #footerContainer > a:first-child:hover {
background: url(/Portals/215943/layout/footer-arrow.png) no-repeat scroll 0 -30px transparent;
}
 
#foxboro_footer #footerContainer table {
float: left;
margin-left: -2px;
text-align: left;
}
 
#foxboro_footer h4 {
font-size: 16px;
line-height: 16px;
margin-top: 25px;
margin-bottom: 13px;
text-shadow: 0 -1px 0 #000000;
font-weight: normal;
color: #505050;
font-family: DroidSansRegular,Arial,Helvetican,sans-serif;
}
 
#foxboro_footer #footerContainer span {
font-size: 11px;
line-height: 20px;
text-shadow: 0 -1px 0 #000000;
}
 
#foxboro_footer #footerContainer table a {
font-size: 11px;
}
 
#foxboro_footer #footerContainer table a:hover {
color: #A0A3A4;
}
 
#foxboro_footer p.copyright {
height: 0;
overflow: hidden;
}
 
/* LANDING PAGES */
#foxboro_menu .NavHidden {
display: none;
}
 
/* MOBILE OPTIMIZATION */
#mobileMenu .radmenu {
white-space:normal!important;
}
 
#mobileMenu .radmenu span {
display:block!important;
}
 
#content {
overflow:hidden!important;
}
 
#col1 {
padding-top:0!important;
overflow:hidden!important;
}
 
#col3 {
padding-top:0!important;
overflow:hidden!important;
}
 
#content img {
max-width:312px!important;
margin-left:2px!important;
margin-right:2px!important;
}
 
#inner table {
display:table!important;
width:100%!important;
}
 
#content textarea {
width:96%!important;
max-width:320px!important;
}
 
#Body #top h2,
#Body #top h3 {
color: inherit;
}
 
#Body #bottom h2,
#Body #bottom h3 {
color: inherit;
}
 
.comment-form table {
width:auto!important;
}
 
.comment-form table td {
white-space:normal!important;
}
 
#main div.comment-form input {
width:auto!important;
}
 
#main div.comment-form,
#main .comment-form fieldset {
height:auto!important;
}
 
#main #bb-container div.submissions .twitter-share-button {
width:62px!important;
}
 
 
/* CMS ELEMENTS */
#hs-nav-v3 {
}
 
#CMS_ELE_0 {
left: 0!important;
}
 
#CMS_ELE_1 {
}
 
.yui-overlay {
z-index: 15!important;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi

Hi syberjj,
Try:

#foxboro_content {
  background: transparent;
}

You may need to do the same to other elements.